Serafim

Sage Meadow shadcn/ui theme

Explore the Sage Meadow shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.

shadcn/ui theme 20

Open in editor
About

Sage Meadow re-skins your whole app: colours, radius and type for light and dark mode. Copy it and paste it into your coding agent, or take the tokens below into your globals.css.

light

  • --backgroundhsl(40, 44%, 96%)
  • --foregroundhsl(25, 20%, 20%)
  • --primaryhsl(145, 30%, 45%)
  • --primary-foregroundhsl(40, 44%, 98%)
  • --secondaryoklch(0.609 0.126 221.723)
  • --accenthsl(15, 65%, 90%)
  • --mutedhsl(40, 20%, 90%)
  • --muted-foregroundhsl(25, 10%, 45%)
  • --cardhsl(40, 44%, 98%)
  • --borderhsl(35, 30%, 85%)
  • --ringhsl(145, 30%, 45%)
  • --destructivehsl(0, 55%, 55%)

dark

  • --backgroundhsl(220, 25%, 12%)
  • --foregroundhsl(40, 30%, 92%)
  • --primaryhsl(155, 35%, 45%)
  • --primary-foregroundhsl(220, 25%, 10%)
  • --secondaryhsl(210, 20%, 25%)
  • --accenthsl(170, 30%, 25%)
  • --mutedhsl(220, 20%, 20%)
  • --muted-foregroundhsl(215, 15%, 70%)
  • --cardhsl(220, 25%, 15%)
  • --borderhsl(220, 20%, 25%)
  • --ringhsl(155, 35%, 45%)
  • --destructivehsl(0, 60%, 45%)

More by Serafim

View all