export const title = "Color picker components"
export const description = "Powerful and customizable React color picker components built for modern applications and websites. These color pickers are built using React Aria and styled with Tailwind CSS."

import * as Demos from "@/components/application/color-picker/color-picker.demo.tsx";

<PreviewAndCode title="Color picker example" isPublic={false}>
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ColorPickerSolidDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="color-picker/ColorPickerSolidDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this color picker component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add color-picker
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="application/color-picker" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the color picker components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Color picker examples

Below are examples and variations of this color picker component:

### Color picker {{ tocOnly:true }}

<PreviewAndCode title="Color picker" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ColorPickerNoTabsDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="color-picker/ColorPickerNoTabsDemo" />
    </TabPanel>
</PreviewAndCode>

### Color swatch picker

The color swatch picker provides a grid-based color selection experience with a preview area and a hex input field. This is useful when you want users to quickly pick from a predefined set of colors.

<PreviewAndCode title="Color swatch picker" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ColorSwatchPickerDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="color-picker/ColorSwatchPickerDemo" />
    </TabPanel>
</PreviewAndCode>

### Saved swatches small {{ tocOnly:true }}

<PreviewAndCode title="Saved swatches small" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.SavedSwatchesSmDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="color-picker/SavedSwatchesSmDemo" />
    </TabPanel>
</PreviewAndCode>

### Saved swatches medium {{ tocOnly:true }}

<PreviewAndCode title="Saved swatches medium" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.SavedSwatchesMdDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="color-picker/SavedSwatchesMdDemo" />
    </TabPanel>
</PreviewAndCode>

### Brand swatches

Brand color swatches provide a curated palette of your brand colors based on Tailwind CSS v4.3 color variables. This is useful for design systems where users need to pick from a consistent set of brand colors.

<PreviewAndCode title="Brand swatches" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.BrandSwatchesDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="color-picker/BrandSwatchesDemo" />
    </TabPanel>
</PreviewAndCode>

### Gray swatches {{ tocOnly:true }}

<PreviewAndCode title="Gray swatches" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.GraySwatchesDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="color-picker/GraySwatchesDemo" />
    </TabPanel>
</PreviewAndCode>

### Minimal picker

The minimal picker provides a compact color selection experience with just the eye dropper, hue slider, alpha slider, and color format input. This is ideal for space-constrained UIs where you need basic color picking functionality.

<PreviewAndCode title="Minimal picker" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.MinimalPickerDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="color-picker/MinimalPickerDemo" />
    </TabPanel>
</PreviewAndCode>

### Hue slider

The standalone hue slider allows users to select a hue value across the full color spectrum. It displays a swatch preview of the selected color alongside the slider.

<PreviewAndCode title="Hue slider" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.HueSliderDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="color-picker/HueSliderDemo" />
    </TabPanel>
</PreviewAndCode>

### Transparency slider

The standalone transparency (alpha) slider allows users to control the opacity of a selected color. It displays a checkered background to visualize the transparency level.

<PreviewAndCode title="Transparency slider" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.TransparencySliderDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="color-picker/TransparencySliderDemo" />
    </TabPanel>
</PreviewAndCode>

### Palette picker

The palette picker displays the full Tailwind CSS color palette in a grid layout, allowing users to select from a comprehensive range of colors. It also includes an opacity slider for fine-tuning the selected color.

<PreviewAndCode title="Palette picker" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.PalettePickerDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="color-picker/PalettePickerDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

<FAQ
    faqs={[
        {
            question: "What color formats are supported?",
            answer: "The color picker supports multiple color formats including `\"hex\"`, `\"rgb\"`, `\"css\"` (rgba), `\"hsl\"`, and `\"hsb\"`. You can switch between formats using the built-in format selector dropdown.",
        },
        {
            question: "Does the color picker support the EyeDropper API?",
            answer: "Yes, the color picker includes an eye dropper button that uses the browser's EyeDropper API when available. This allows users to pick any color from their screen. The button is automatically hidden in browsers that don't support the API.",
        },
        {
            question: "How do I use the color picker with saved colors?",
            answer: "You can use the `ColorPicker.SavedColors` sub-component to display a grid of saved color swatches. Pass an array of CSS color strings to the `colors` prop, and use `onSelect` to handle color selection and `onAdd` to handle adding new colors.",
        },
        {
            question: "Can I use the color picker sub-components independently?",
            answer: "Yes, the color picker uses a compound component pattern. You can use individual sub-components like `ColorPicker.Area`, `ColorPicker.HueSlider`, `ColorPicker.AlphaSlider`, `ColorPicker.ColorFormatSelect`, and `ColorPicker.ColorValueInput` independently within a `ColorPicker.Provider` wrapper.",
        },
        {
            question: "How do I control the selected color programmatically?",
            answer: "Wrap your color picker components with `ColorPicker.Provider` and use the `value` prop for controlled mode or `defaultValue` for uncontrolled mode. Use the `onChange` callback to respond to color changes. You can also access state via the `useColorPicker()` hook.",
        },
    ]}
/>