Skip to content

FAB Theme Picker

Menus and commandsMIT
View in Storybook

Floating theme switcher button — palette swatches and dark/light toggle.

bun add @otfdashkit/ui

Preview

FAB Theme Picker

Code

import { FloatingThemePicker } from '@otfdashkit/ui'

export function Example() {
  return (
    <div className="relative w-full h-[400px] bg-background flex items-center justify-center">
      <div className="text-center space-y-1">
        <p className="text-sm font-semibold text-foreground">FloatingThemePicker</p>
        <p className="text-xs text-muted-foreground">Click the palette button — bottom right</p>
      </div>
      <FloatingThemePicker />
    </div>
  )
}

Free with the SDK. This block ships in @otfdashkit/ui under the MIT license.

Props

Props declared in the FloatingThemePicker source. Inherited HTML attributes are not listed.

PropTypeDefaultDescription
classNamestring
optionsThemePickerOption[]
position'bottom-right' | 'bottom-left' | 'top-right' | 'top-left''bottom-right'