ColorSwatchPicker

PreviousNext
Docs
react-ariaui

Preview

Loading preview…
components/ui/ColorSwatchPicker.tsx
'use client';
import {
  ColorSwatchPicker as AriaColorSwatchPicker,
  ColorSwatchPickerItem as AriaColorSwatchPickerItem,
  ColorSwatchPickerItemProps,
  ColorSwatchPickerProps
} from 'react-aria-components';

import {ColorSwatch} from '@/registry/react-aria/ui/ColorSwatch';

import './ColorSwatchPicker.css';

export function ColorSwatchPicker(
  { children, ...props }: ColorSwatchPickerProps
) {
  return (
    (
      <AriaColorSwatchPicker {...props}>
        {children}
      </AriaColorSwatchPicker>
    )
  );
}

export function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps) {
  return (
    (
      <AriaColorSwatchPickerItem {...props}>
        <ColorSwatch />
      </AriaColorSwatchPickerItem>
    )
  );
}

Installation

npx shadcn@latest add @react-aria/css-colorswatchpicker

Usage

import { CssColorswatchpicker } from "@/components/ui/css-colorswatchpicker"
<CssColorswatchpicker />