Color Swatch

A ColorSwatch displays a preview of a selected color.

default.tsx

<ColorSwatch color="#f00" />

Installation

npm

pnpm

yarn

bun

npx dotui-cli@latest add color-swatch

import { ColorSwatch } from "@/components/core/color-swatch";
 
<ColorSwatch color="#f00" />;

Use a ColorSwatch to display a preview of a selected color.

Prop	Type	Default	Description
`color*`	`string \| Color`	-	The color value to display in the swatch.
`children`	`ReactNode \| (values: ColorSwatchRenderProps & {defaultChildren: ReactNode \| undefined}) => ReactNode`	-	The children of the component. A function may be provided to alter the children based on component state.
`className`	`string`	-	The CSS className for the element.
`style`	`CSSProperties \| (values: ColorSwatchRenderProps & {defaultStyle: CSSProperties}) => CSSProperties`	-	The inline style for the element. A function may be provided to compute the style based on component state.

Last updated on 10/11/2024

Bringing singularity to the web.

Built by mehdibha. The source code is available on GitHub.