Color Selector
A single choice among colour swatches, built on a native radio group so it works with the keyboard and in forms. A ring settles round the chosen swatch, and every swatch has a name, so it never relies on colour alone.
Loading preview…
Install
Steps for Next.js.
Install the package
One package carries every component and its effects, all original code.
bun add @poulo2/ai-componentsLoad the styles with Tailwind v4
Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.
@import "@poulo2/ai-components/theme.css"; @source "../node_modules/@poulo2/ai-components/dist";Or load the prebuilt stylesheet
For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.
import "@poulo2/ai-components/styles.css";
Props
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | — | The selected value, when controlled. |
| defaultValue | string | "" | The starting value, when uncontrolled. |
| onValueChange | (value: string) => void | — | Called with the newly selected value. |
| name | string | — | The radio group's name in form submission. Generated when omitted. |
| required | boolean | false | Requires a choice in a form. |
| disabled | boolean | false | Disables every swatch. |
| ColorSelectorItem | { value, color, label } | — | One swatch: its value, any CSS colour, and its accessible name. |