Skip to contentOpens in a new tab

Esc

↑↓navigate↵open⌘Jpreview

On this page

Test

Was this page helpful?

Thanks for your feedback!

Open in chat

Design

Changes apply to every component preview.

Style

Choose a color system, then choose its colors.

Color system

gnosticshadcn

DefaultBlueEarthMonochromeSand

NeutralStoneZincMauveOliveMistTaupe

NeutralStoneZincMauveOliveMistTaupeAmberBlueCyanEmeraldFuchsiaGreenIndigoLimeOrangePinkPurpleRedRoseSkyTealVioletYellow

NeutralStoneZincMauveOliveMistTaupeAmberBlueCyanEmeraldFuchsiaGreenIndigoLimeOrangePinkPurpleRedRoseSkyTealVioletYellow

Color changes apply as you select them. You can still use the previews while this menu is open.

Body font

Heading font

Radius

Menu accent

Import a shadcn preset code or Gnostic preset URL

Style sets spacing, shape, and component details. Use the light/dark button in the header to change color mode.