Corporate Shadcn Theme
Professional corporate theme with trustworthy blue accents for shadcn/ui. Enterprise-grade design with business credibility. TypeScript ready.
Powered by
Working with shadcn themes?
Join our Discord community for help from other shadcn developers working with themes and design systems.
Corporate Shadcn Theme
After building apps for Fortune 500 companies, learned that corporate doesn't have to mean boring. This theme uses that trustworthy blue that says "we handle your money responsibly" without the sterile feeling of most enterprise software. Clean, professional, but with enough personality to not put people to sleep during quarterly reviews.
Perfect for B2B SaaS, financial platforms, enterprise dashboards, or any React project where credibility and trust matter more than being trendy. The Inter font gives you that modern professional look that works in boardrooms and user interfaces alike.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/corporate.jsonnpx shadcn@latest add https://www.shadcn.io/registry/corporate.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/corporate.jsonbunx shadcn@latest add https://www.shadcn.io/registry/corporate.jsonOriginal theme by tweakcn.com
CSS Variables
Copy and paste the following CSS variables into your global CSS file:
:root {
--background: oklch(0.98 0 0);
--foreground: oklch(0.21 0.03 264.67);
--card: oklch(1.00 0 0);
--card-foreground: oklch(0.21 0.03 264.67);
--popover: oklch(1.00 0 0);
--popover-foreground: oklch(0.21 0.03 264.67);
--primary: oklch(0.48 0.20 260.48);
--primary-foreground: oklch(1.00 0 0);
--secondary: oklch(0.97 0.00 264.70);
--secondary-foreground: oklch(0.37 0.03 259.73);
--muted: oklch(0.97 0.00 264.70);
--muted-foreground: oklch(0.55 0.02 264.37);
--accent: oklch(0.95 0.02 261.78);
--accent-foreground: oklch(0.48 0.20 260.48);
--destructive: oklch(0.58 0.22 27.33);
--border: oklch(0.93 0.01 264.60);
--input: oklch(0.93 0.01 264.60);
--ring: oklch(0.48 0.20 260.48);
--chart-1: oklch(0.48 0.20 260.48);
--chart-2: oklch(0.56 0.24 260.95);
--chart-3: oklch(0.40 0.16 259.09);
--chart-4: oklch(0.43 0.16 259.85);
--chart-5: oklch(0.29 0.07 260.37);
--sidebar: oklch(0.97 0.00 264.70);
--sidebar-foreground: oklch(0.21 0.03 264.67);
--sidebar-primary: oklch(0.48 0.20 260.48);
--sidebar-primary-foreground: oklch(1.00 0 0);
--sidebar-accent: oklch(0.95 0.02 261.78);
--sidebar-accent-foreground: oklch(0.48 0.20 260.48);
--sidebar-border: oklch(0.93 0.01 264.60);
--sidebar-ring: oklch(0.48 0.20 260.48);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Inter, sans-serif;
--font-serif: Source Serif 4, serif;
--font-mono: IBM Plex Mono, monospace;
--radius: 0.375rem;
--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;
}
.dark {
--background: oklch(0.26 0.03 262.71);
--foreground: oklch(0.93 0.01 264.60);
--card: oklch(0.30 0.03 261.75);
--card-foreground: oklch(0.93 0.01 264.60);
--popover: oklch(0.30 0.03 261.75);
--popover-foreground: oklch(0.93 0.01 264.60);
--primary: oklch(0.56 0.24 260.95);
--primary-foreground: oklch(1.00 0 0);
--secondary: oklch(0.35 0.04 262.16);
--secondary-foreground: oklch(0.93 0.01 264.60);
--muted: oklch(0.30 0.03 261.75);
--muted-foreground: oklch(0.71 0.02 261.33);
--accent: oklch(0.33 0.04 264.82);
--accent-foreground: oklch(0.93 0.01 264.60);
--destructive: oklch(0.64 0.21 25.33);
--border: oklch(0.35 0.04 262.16);
--input: oklch(0.35 0.04 262.16);
--ring: oklch(0.56 0.24 260.95);
--chart-1: oklch(0.56 0.24 260.95);
--chart-2: oklch(0.48 0.20 260.48);
--chart-3: oklch(0.69 0.17 256.00);
--chart-4: oklch(0.43 0.16 259.85);
--chart-5: oklch(0.29 0.07 260.37);
--sidebar: oklch(0.26 0.03 262.71);
--sidebar-foreground: oklch(0.93 0.01 264.60);
--sidebar-primary: oklch(0.56 0.24 260.95);
--sidebar-primary-foreground: oklch(1.00 0 0);
--sidebar-accent: oklch(0.33 0.04 264.82);
--sidebar-accent-foreground: oklch(0.93 0.01 264.60);
--sidebar-border: oklch(0.35 0.04 262.16);
--sidebar-ring: oklch(0.56 0.24 260.95);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Inter, sans-serif;
--font-serif: Source Serif 4, serif;
--font-mono: IBM Plex Mono, monospace;
--radius: 0.375rem;
--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
Banks, insurance companies, and enterprise software have been using blue for decades because it actually works—studies show blue increases trust and reduces anxiety around financial decisions. This theme uses the right shade of corporate blue that feels authoritative without being intimidating.
Most business themes either go too conservative and look dated, or try to be trendy and lose credibility. This theme hits the sweet spot—modern enough for today's users but professional enough for C-suite presentations.
Dark mode maintains that same trustworthy feeling while being comfortable for long work sessions. The blue becomes more sophisticated and easier on the eyes, perfect for analysts who spend all day in dashboards.
What's actually in this theme
Dead simple setup—copy the CSS variables into your globals.css and you're done. The Inter font gives you that crisp, professional typography that looks good in quarterly reports and user interfaces alike.
That trustworthy blue is perfect for primary actions that involve important decisions—"Submit Report," "Approve Request," "Execute Trade." The clean grays and whites create environments where users feel confident making business-critical choices.
All contrast ratios pass WCAG AA standards because enterprise accessibility compliance isn't optional. 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 corporate blue should mark actions that require trust and authority—anything involving money, data, or important business decisions. Use the clean neutrals to create environments where users can focus on complex information without visual distractions.
This works especially well for B2B SaaS, financial dashboards, enterprise tools, or any interface where credibility matters more than creativity. Think McKinsey presentation, not startup pitch deck.
In practice, embrace the professional restraint this palette creates. The generous contrast and conservative color choices reduce decision fatigue, helping users focus on business objectives rather than fighting with colorful interfaces.
You might also like
Blue Theme
Pure blue theme with professional trust
Slack Theme
Modern workplace communication theme
Vercel Theme
Clean development-focused professional theme
Mono Theme
Monochromatic theme for serious business
Graphite Theme
Sophisticated graphite with executive appeal
Violet Theme
Modern violet with corporate sophistication
FAQ
Claude Shadcn Theme
Claude AI inspired theme with warm orange accents and clean design for shadcn/ui. Professional AI-inspired aesthetic with thoughtful color choices. TypeScript ready.
Marshmallow Shadcn Theme
Soft pastel theme with pink and purple tones for shadcn/ui. Complete design system with light/dark modes. TypeScript ready for React.