How do I install the Color Scheme Select component?

Install the free SDK with `bun add @otfdashkit/ui` (or npm/pnpm) and import { ColorSchemeSelect }. Copy-paste distribution is also supported.

Is the Color Scheme Select component free to use?

Yes. Color Scheme Select ships in @otfdashkit/ui, part of the free MIT-licensed OTF SDK on npm — use it in personal and commercial projects.

Which platform does this Color Scheme Select page cover?

This page documents the web version (@otfdashkit/ui); the OTF SDK's web and native packages share component names and design tokens where a counterpart exists, but props differ per platform.

Color Scheme Select

InputMIT

View in Storybook

Color palette picker dropdown — switch between branded color schemes.

bun add @otfdashkit/ui

Preview

Color Scheme SelectInput

Loading Storybook preview…

Code

@otfdashkit/ui

import { ColorSchemeSelect, Body, Caption } from '@otfdashkit/ui'

export function Example() {
  return (
    <div className="space-y-3 w-72">
      <Caption>Pick a palette</Caption>
      <ColorSchemeSelect />
      <Body size="sm" tone="muted">
        Sets a <code>theme-*</code> class on <code>&lt;html&gt;</code>. Persists
        in <code>otf-theme</code>. Note: this Storybook has its own theme toolbar
        which may override the root class — see the change in an app consumer.
      </Body>
    </div>
  )
}

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

Props

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

Prop	Type	Default	Description
className	string
defaultValue	string
onChange	(themeClass: string) => void
options	ComboboxOption[]

Preview

Code

Props

Related