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 — Base UI
color-swatch.tsx
123456789101112131415161718import * as stylex from "@stylexjs/stylex";import { ColorSwatch } from "#components/ui/base-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 (exposed as data-size / data-shape); 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} /> </> );}