{"@context":"https://schema.org","@graph":[{"@type":"TechArticle","headline":"Color Thumb","description":"Display a draggable indicator in a color area, slider, or wheel.","url":"https://intentui.com/docs/components/colors/color-thumb","author":{"@type":"Person","name":"Irsyad","url":"https://x.com/irsyad"},"publisher":{"@type":"Organization","name":"Intent UI","url":"https://intentui.com","logo":{"@type":"ImageObject","url":"https://intentui.com/icon.svg"}},"mainEntityOfPage":{"@type":"WebPage","@id":"https://intentui.com/docs/components/colors/color-thumb"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://intentui.com"},{"@type":"ListItem","position":2,"name":"Docs","item":"https://intentui.com/docs"},{"@type":"ListItem","position":3,"name":"Components","item":"https://intentui.com/docs/components"},{"@type":"ListItem","position":4,"name":"Colors","item":"https://intentui.com/docs/components/colors"},{"@type":"ListItem","position":5,"name":"Color Thumb","item":"https://intentui.com/docs/components/colors/color-thumb"}]}]}
Color Thumb
Loading...
Installation
Add the component with the CLI.
npm
pnpm
yarn
bun
npx shadcn@latest add @intentui/color-thumb
Manual installation
Install the dependencies, then copy the component source into your project.
npm
pnpm
yarn
bun
npm install react-aria-components
Component API
ColorThumb
ColorThumb extends the React Aria Components <ColorThumb> component.
classNamestring