Serafim

Mint Slate shadcn/ui theme

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

shadcn/ui theme 61

Open in editor
About

Mint Slate 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(60, 5%, 85%)
  • --foregroundhsl(0, 0%, 15%)
  • --primaryhsl(0, 0%, 20%)
  • --primary-foregroundhsl(60, 5%, 95%)
  • --secondaryhsl(200, 10%, 40%)
  • --accenthsl(35, 20%, 50%)
  • --mutedhsl(60, 2%, 75%)
  • --muted-foregroundhsl(0, 0%, 40%)
  • --cardhsl(60, 5%, 80%)
  • --borderhsl(0, 0%, 60%)
  • --ringhsl(0, 0%, 20%)
  • --destructivehsl(0, 50%, 40%)

dark

  • --backgroundhsl(240, 10%, 6%)
  • --foregroundhsl(180, 5%, 70%)
  • --primaryhsl(180, 20%, 60%)
  • --primary-foregroundhsl(240, 20%, 5%)
  • --secondaryhsl(260, 15%, 15%)
  • --accenthsl(280, 20%, 20%)
  • --mutedhsl(240, 10%, 12%)
  • --muted-foregroundhsl(240, 5%, 45%)
  • --cardhsl(240, 10%, 8%)
  • --borderhsl(240, 5%, 15%)
  • --ringhsl(180, 20%, 60%)
  • --destructivehsl(0, 60%, 30%)

More by Serafim

View all