Supabase Shadcn Theme
Supabase-inspired theme with developer-friendly green for shadcn/ui. Modern backend platform design with API-focused precision. TypeScript ready.
Powered by
Working with shadcn themes?
Join our Discord community for help from other shadcn developers working with themes and design systems.
Supabase Shadcn Theme
Always appreciated how Supabase made backend development feel approachable instead of intimidating. This theme captures that same developer-friendly energy—that distinctive green that says "database operations just work," combined with the clean, modern aesthetic that makes complex backend tasks feel manageable.
Perfect for database interfaces, API dashboards, developer tools, or any React project where backend functionality needs to feel accessible and trustworthy. The Outfit font gives you that same modern, technical typography that makes data management feel elegant.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/supabase.jsonnpx shadcn@latest add https://www.shadcn.io/registry/supabase.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/supabase.jsonbunx shadcn@latest add https://www.shadcn.io/registry/supabase.jsonOriginal theme by tweakcn.com
CSS Variables
Copy and paste the following CSS variables into your global CSS file:
:root {
--background: oklch(0.9911 0 0);
--foreground: oklch(0.2046 0 0);
--card: oklch(0.9911 0 0);
--card-foreground: oklch(0.2046 0 0);
--popover: oklch(0.9911 0 0);
--popover-foreground: oklch(0.4386 0 0);
--primary: oklch(0.8348 0.1302 160.9080);
--primary-foreground: oklch(0.2626 0.0147 166.4589);
--secondary: oklch(0.9940 0 0);
--secondary-foreground: oklch(0.2046 0 0);
--muted: oklch(0.9461 0 0);
--muted-foreground: oklch(0.2435 0 0);
--accent: oklch(0.9461 0 0);
--accent-foreground: oklch(0.2435 0 0);
--destructive: oklch(0.5523 0.1927 32.7272);
--border: oklch(0.9037 0 0);
--input: oklch(0.9731 0 0);
--ring: oklch(0.8348 0.1302 160.9080);
--chart-1: oklch(0.8348 0.1302 160.9080);
--chart-2: oklch(0.6231 0.1880 259.8145);
--chart-3: oklch(0.6056 0.2189 292.7172);
--chart-4: oklch(0.7686 0.1647 70.0804);
--chart-5: oklch(0.6959 0.1491 162.4796);
--sidebar: oklch(0.9911 0 0);
--sidebar-foreground: oklch(0.5452 0 0);
--sidebar-primary: oklch(0.8348 0.1302 160.9080);
--sidebar-primary-foreground: oklch(0.2626 0.0147 166.4589);
--sidebar-accent: oklch(0.9461 0 0);
--sidebar-accent-foreground: oklch(0.2435 0 0);
--sidebar-border: oklch(0.9037 0 0);
--sidebar-ring: oklch(0.8348 0.1302 160.9080);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Outfit, sans-serif;
--font-serif: ui-serif, Georgia, serif;
--font-mono: monospace;
--radius: 0.5rem;
--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
--tracking-normal: 0em;
--spacing: 0.25rem;
}
.dark {
--background: oklch(0.1822 0 0);
--foreground: oklch(0.9288 0.0126 255.5078);
--card: oklch(0.2046 0 0);
--card-foreground: oklch(0.9288 0.0126 255.5078);
--popover: oklch(0.2603 0 0);
--popover-foreground: oklch(0.7348 0 0);
--primary: oklch(0.4365 0.1044 156.7556);
--primary-foreground: oklch(0.9213 0.0135 167.1556);
--secondary: oklch(0.2603 0 0);
--secondary-foreground: oklch(0.9851 0 0);
--muted: oklch(0.2393 0 0);
--muted-foreground: oklch(0.7122 0 0);
--accent: oklch(0.3132 0 0);
--accent-foreground: oklch(0.9851 0 0);
--destructive: oklch(0.3123 0.0852 29.7877);
--border: oklch(0.2809 0 0);
--input: oklch(0.2603 0 0);
--ring: oklch(0.8003 0.1821 151.7110);
--chart-1: oklch(0.8003 0.1821 151.7110);
--chart-2: oklch(0.7137 0.1434 254.6240);
--chart-3: oklch(0.7090 0.1592 293.5412);
--chart-4: oklch(0.8369 0.1644 84.4286);
--chart-5: oklch(0.7845 0.1325 181.9120);
--sidebar: oklch(0.1822 0 0);
--sidebar-foreground: oklch(0.6301 0 0);
--sidebar-primary: oklch(0.4365 0.1044 156.7556);
--sidebar-primary-foreground: oklch(0.9213 0.0135 167.1556);
--sidebar-accent: oklch(0.3132 0 0);
--sidebar-accent-foreground: oklch(0.9851 0 0);
--sidebar-border: oklch(0.2809 0 0);
--sidebar-ring: oklch(0.8003 0.1821 151.7110);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Outfit, sans-serif;
--font-serif: ui-serif, Georgia, serif;
--font-mono: monospace;
--radius: 0.5rem;
--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--color-destructive-foreground: var(--destructive-foreground);
--font-sans: var(--font-sans);
--font-mono: var(--font-mono);
--font-serif: var(--font-serif);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--shadow-2xs: var(--shadow-2xs);
--shadow-xs: var(--shadow-xs);
--shadow-sm: var(--shadow-sm);
--shadow: var(--shadow);
--shadow-md: var(--shadow-md);
--shadow-lg: var(--shadow-lg);
--shadow-xl: var(--shadow-xl);
--shadow-2xl: var(--shadow-2xl);
}Why this theme actually works
Supabase revolutionized how developers think about backend services by making complex database operations feel intuitive. Their design philosophy isn't just about making things look good—it's about making powerful tools feel approachable. This theme brings that same balance to any interface.
Most backend-focused themes either go too technical and intimidate users, or too simplified and lose credibility with developers. Supabase's approach hits the sweet spot—sophisticated enough for complex data operations, friendly enough for rapid prototyping.
Dark mode maintains that developer-focused feeling while being comfortable for those late-night debugging sessions. The green becomes more sophisticated while keeping that "everything just works" confidence that makes backend development feel less daunting.
What's actually in this theme
Dead simple setup—copy the CSS variables into your globals.css and you're done. The Outfit font gives you that same modern, technical typography that Supabase popularized in developer tooling—clean but approachable.
That distinctive green is perfect for success states and primary actions—"Deploy," "Sync Database," "Run Migration." The clean backgrounds create environments where complex data relationships and API configurations feel manageable rather than overwhelming.
All contrast ratios pass WCAG AA standards because accessible developer tools are better developer tools. Since it uses standard shadcn color tokens, your TypeScript autocomplete for bg-primary, text-foreground, etc. works perfectly.
How to use this in projects
The green should mark successful operations and primary data actions—anything that moves information or completes backend processes. Use the clean, modern aesthetic to make complex technical workflows feel approachable and trustworthy.
This works especially well for database interfaces, API dashboards, developer consoles, or any interface where backend functionality needs to feel both powerful and accessible. Think modern data operations, not legacy admin panels.
In practice, embrace the developer-friendly aesthetic this palette creates. The distinctive green against clean backgrounds reduces the cognitive load of complex backend operations, helping developers focus on building rather than fighting their tools.
You might also like
Vercel Theme
Clean development-focused platform theme
Slack Theme
Modern collaboration platform with team focus
Corporate Theme
Professional corporate theme with business authority
Nature Theme
Natural theme with organic green accents
Perpetuity Theme
Timeless terminal theme with developer precision
Notebook Theme
Academic notebook theme for documentation
FAQ
Slack Shadcn Theme
Slack-inspired theme with professional purple accents for shadcn/ui. Modern workspace design with team communication vibes. TypeScript ready.
Twitter Shadcn Theme
Twitter-inspired theme with iconic blue for shadcn/ui. Social platform design with conversation-focused elements. TypeScript ready.