ColorField

Displays a CSS color value as a colored chip plus its string label.

Installation

pnpm dlx shadcn@latest add @shadmin/color-field

Usage

import { ColorField } from '@/components/admin';
 
<ColorField source="color" />
<ColorField source="color" showLabel={false} />
<ColorField source="color" empty="No color set" />

Props

Prop	Required	Type	Default	Description
`source`	Required	`string`	-	Record field to read
`showLabel`	Optional	`boolean`	`true`	Show the color string next to the chip
`empty`	Optional	`ReactNode`	-	Fallback when value is `null`/empty
`className`	Optional	`string`	-	CSS class on the wrapping `<span>`

Accepted formats

Any CSS color string the browser can parse: #3b82f6, rgb(59 130 246), oklch(0.7 0.2 250), hsl(217 91% 60%), named colors like tomato.