All components
Color Swatch
Color chips with an alpha checkerboard, sized from 2xs to 2xl.
Sizes
2xs
xs
sm
md
lg
xl
2xl
Install
zsh — color-swatch
1bunx stylexblocks add color-swatchUsage — Ark UI
color-swatch.tsx
1234567891011121314151617import * as stylex from "@stylexjs/stylex";import { ColorSwatch } from "#components/ui/ark-ui/color-swatch.tsx";
const styles = stylex.create({ indigo: { "--color": "oklch(0.55 0.22 277)" },});
export function Example() { return ( <> {/* size + shape props resolve through the StyleX recipe; the swatch color feeds the --color custom property via the style prop */} <ColorSwatch size="md" style={styles.indigo} /> <ColorSwatch size="md" shape="circle" style={styles.indigo} /> </> );}