Slack Shadcn Theme
Slack-inspired theme with professional purple accents for shadcn/ui. Modern workspace design with team communication vibes. TypeScript ready.
Powered by
Working with shadcn themes?
Join our Discord community for help from other shadcn developers working with themes and design systems.
Slack Shadcn Theme
Spent years in Slack channels and always appreciated how they made team communication feel approachable instead of corporate. This theme captures that same collaborative energy—friendly purples that feel productive, clean whites that don't strain your eyes during long work sessions, and the kind of modern design that makes remote work feel connected.
Perfect for team tools, collaboration platforms, productivity apps, or any React project where you want that modern workplace vibe. The Lato font gives you that same friendly-but-professional typography that makes complex workflows feel manageable.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/slack.jsonnpx shadcn@latest add https://www.shadcn.io/registry/slack.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/slack.jsonbunx shadcn@latest add https://www.shadcn.io/registry/slack.jsonOriginal theme by tweakcn.com
CSS Variables
Copy and paste the following CSS variables into your global CSS file:
:root {
--background: oklch(1.00 0 0);
--foreground: oklch(0.23 0.00 325.86);
--card: oklch(0.98 0 0);
--card-foreground: oklch(0.23 0.00 325.86);
--popover: oklch(0.98 0 0);
--popover-foreground: oklch(0.23 0.00 325.86);
--primary: oklch(0.37 0.14 323.23);
--primary-foreground: oklch(1.00 0 0);
--secondary: oklch(0.96 0.01 312.56);
--secondary-foreground: oklch(0.31 0.11 327.07);
--muted: oklch(0.97 0.00 264.70);
--muted-foreground: oklch(0.49 0 0);
--accent: oklch(0.88 0.02 323.34);
--accent-foreground: oklch(0.31 0.11 327.07);
--destructive: oklch(0.59 0.22 11.50);
--border: oklch(0.91 0 0);
--input: oklch(0.91 0 0);
--ring: oklch(0.37 0.14 323.23);
--chart-1: oklch(0.31 0.11 327.07);
--chart-2: oklch(0.37 0.14 323.23);
--chart-3: oklch(0.59 0.22 11.50);
--chart-4: oklch(0.77 0.13 223.19);
--chart-5: oklch(0.69 0.14 160.23);
--sidebar: oklch(0.96 0.01 312.56);
--sidebar-foreground: oklch(0.23 0.00 325.86);
--sidebar-primary: oklch(0.37 0.14 323.23);
--sidebar-primary-foreground: oklch(1.00 0 0);
--sidebar-accent: oklch(0.88 0.02 323.34);
--sidebar-accent-foreground: oklch(0.31 0.11 327.07);
--sidebar-border: oklch(0.91 0 0);
--sidebar-ring: oklch(0.37 0.14 323.23);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Lato, sans-serif;
--font-serif: Merriweather, serif;
--font-mono: Roboto 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;
}
.dark {
--background: oklch(0.23 0.01 255.60);
--foreground: oklch(0.93 0 0);
--card: oklch(0.26 0.01 255.58);
--card-foreground: oklch(0.93 0 0);
--popover: oklch(0.26 0.01 255.58);
--popover-foreground: oklch(0.93 0 0);
--primary: oklch(0.58 0.14 327.21);
--primary-foreground: oklch(1.00 0 0);
--secondary: oklch(0.30 0.01 248.05);
--secondary-foreground: oklch(0.93 0 0);
--muted: oklch(0.26 0.01 255.58);
--muted-foreground: oklch(0.68 0 0);
--accent: oklch(0.33 0.03 326.23);
--accent-foreground: oklch(0.93 0 0);
--destructive: oklch(0.59 0.22 11.50);
--border: oklch(0.30 0.01 268.37);
--input: oklch(0.30 0.01 268.37);
--ring: oklch(0.58 0.14 327.21);
--chart-1: oklch(0.58 0.14 327.21);
--chart-2: oklch(0.77 0.13 223.19);
--chart-3: oklch(0.69 0.14 160.23);
--chart-4: oklch(0.59 0.22 11.50);
--chart-5: oklch(0.80 0.15 82.64);
--sidebar: oklch(0.23 0.01 255.60);
--sidebar-foreground: oklch(0.93 0 0);
--sidebar-primary: oklch(0.58 0.14 327.21);
--sidebar-primary-foreground: oklch(1.00 0 0);
--sidebar-accent: oklch(0.33 0.03 326.23);
--sidebar-accent-foreground: oklch(0.93 0 0);
--sidebar-border: oklch(0.30 0.01 268.37);
--sidebar-ring: oklch(0.58 0.14 327.21);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Lato, sans-serif;
--font-serif: Merriweather, serif;
--font-mono: Roboto 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
Slack revolutionized workplace communication by making it feel human instead of corporate. Their color choices aren't random—that purple creates a sense of creativity and collaboration without being unprofessional. This theme captures that same balance of friendly and productive.
Most workspace themes either go too corporate and feel sterile, or too casual and lose credibility. Slack's design philosophy hits the sweet spot—approachable enough for daily use but polished enough for client calls.
Dark mode maintains that collaborative feeling while being comfortable for those late-night deployment discussions. The purple becomes more sophisticated while keeping that team-focused energy that makes remote work feel connected.
What's actually in this theme
Dead simple setup—copy the CSS variables into your globals.css and you're done. The Lato font gives you that same clean, friendly typography that Slack popularized in modern workplace tools.
That collaborative purple is perfect for actions that bring people together—"Join Channel," "Share Update," "Start Call." The clean backgrounds create environments where complex team workflows feel manageable rather than overwhelming.
All contrast ratios pass WCAG AA standards because inclusive design is fundamental to effective team communication. 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 purple should mark collaborative actions and team-focused features—anything that connects people or facilitates communication. Use the clean neutrals to create calm environments where users can focus on getting work done together.
This works especially well for team tools, project management apps, communication platforms, or any interface where collaboration matters more than hierarchy. Think team huddle, not board meeting.
In practice, embrace the collaborative aesthetic this palette creates. The friendly purple against clean backgrounds reduces the friction of remote work, helping teams feel connected even when they're distributed across time zones.
You might also like
Violet Theme
Pure violet theme with creative collaboration vibes
Corporate Theme
Professional corporate theme for business use
Vercel Theme
Clean development-focused workspace theme
Twitter Theme
Social communication platform inspired theme
Supabase Theme
Modern developer collaboration platform theme
Claude Theme
AI-powered collaboration with helpful orange accents
FAQ
Nature Shadcn Theme
Natural theme with earth tones and organic green accents for shadcn/ui. Calming nature-inspired design with peaceful aesthetics. TypeScript ready.
Supabase Shadcn Theme
Supabase-inspired theme with developer-friendly green for shadcn/ui. Modern backend platform design with API-focused precision. TypeScript ready.