Theme · Inter
Supabase theme for shadcn/ui
A theme in the style of Supabase: neutral greys, a near-black dark mode, and Supabase's green on primary buttons and focus rings.
Font: Inter. Supabase uses Circular, a commercial face; Inter is a close, neutral open alternative.
Preview
Workspace · 02
Invite your team
Teammates get access to every project.
Storage 64%
LiveHealthyv1.0
Workspace · 02
Invite your team
Teammates get access to every project.
Storage 64%
LiveHealthyv1.0
Install
With the shadcn CLI. It writes the light and dark tokens into your global CSS (and the Cuelark utilities if you don't have them yet).
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/theme-supabase.jsonOr paste the CSS after your Tailwind import. The variable names are the standard shadcn/ui ones, so it themes any shadcn project.
:root {
--background: #fcfcfc;
--foreground: #171717;
--card: #ffffff;
--card-foreground: #171717;
--popover: #ffffff;
--popover-foreground: #171717;
--primary: #3ecf8e;
--primary-foreground: #0b2a1d;
--secondary: #f3f3f3;
--secondary-foreground: #171717;
--muted: #f3f3f3;
--muted-foreground: #707070;
--accent: #ededed;
--accent-foreground: #171717;
--border: #e6e6e6;
--input: #dfdfdf;
--ring: #3ecf8e;
--signal: #1f9d62;
--signal-foreground: #ffffff;
--cl-mark: #d0d0d0;
--cl-shade: rgb(0 0 0 / 0.07);
--cl-font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
--cl-text-size: 1;
--cl-tracking: 0em;
--radius: 0.375rem;
--cl-density: 1;
--cl-marks: 0;
--cl-motion: 1;
}
.dark {
--background: #121212;
--foreground: #ededed;
--card: #171717;
--card-foreground: #ededed;
--popover: #1c1c1c;
--popover-foreground: #ededed;
--primary: #3ecf8e;
--primary-foreground: #08251a;
--secondary: #242424;
--secondary-foreground: #ededed;
--muted: #1f1f1f;
--muted-foreground: #a0a0a0;
--accent: #2a2a2a;
--accent-foreground: #ededed;
--border: #2e2e2e;
--input: #363636;
--ring: #3ecf8e;
--signal: #3ecf8e;
--signal-foreground: #08251a;
--cl-mark: #3e3e3e;
--cl-shade: rgb(0 0 0 / 0.5);
}Tokens
| Token | Used for | Light | Dark |
|---|---|---|---|
| --background | Page | ||
| --foreground | Text | ||
| --card | Cards | ||
| --muted | Panels, wells | ||
| --muted-foreground | Secondary text | ||
| --primary | Primary buttons | ||
| --primary-foreground | Text on primary | ||
| --secondary | Secondary buttons | ||
| --accent | Hover, selection | ||
| --border | Borders | ||
| --input | Input borders | ||
| --ring | Focus ring | ||
| --signal | Accent: checked, live, highlights |