Studiov0.6.0

ColorSwatch

Tier 1 — shadcn
Data Display

A color preview tile used in design system documentation to display brand tokens.

Live Preview

RDC Green

#548235

PRT Gold

#c8a84b

RDC Navy

#002060

Code

import { ColorSwatch } from "@regen/ui";

<ColorSwatch />

Props Inspector

No configurable props for this component.

Documentation

Use Cases

  • •Brand color documentation
  • •Design token reference pages
  • •Palette galleries

Do

  • ✓Show hex value on hover or below
  • ✓Group by brand entity

Don't

  • ✗Don't use outside design system docs
  • ✗Don't use for interactive color pickers — use a color input