Color Swatches

The ring glides to the color you pick and the color floods the preview from that side.

Library

UI Lab

Framework

React

Type

component

License

MIT

Install

npx shadcn@latest add https://lab.xevrion.dev/r/color-swatches.json

Files

• src/lab/components/color-swatches.tsx
• src/lib/use-reduced-motion.ts
• src/lib/cn.ts

Source

https://github.com/xevrion/ui-lab

Categories

• Color Palette Components
• React Color Palette Components
• Tailwind CSS Color Palette Components
• Utility Components
• React Utility Components
• Tailwind CSS Utility Components
• Animated Utility Components

More from UI Lab

• Accordion
• Activity Timeline
• Announcement Banner
• Arrow Callout
• Autosave Status
• Availability Badge
• Avatar Stack
• Back To Top
• Badge Counter
• Balance Scale
• Bar Chart
• Binary Year