Theming
Zero custom tokens. shadcn theming, out of the box.
taw-ui components use the same CSS variables as your shadcn components. If your theme works with shadcn, it works with taw-ui. No extra configuration.
The Mental Model
taw-ui doesn't introduce its own design token system. Components use standard shadcn/Tailwind classes: bg-card, text-foreground, text-muted-foreground, border, bg-destructive, text-primary, and so on. Your existing theme cascade handles everything.
How It Works
taw-ui components just work with your existing shadcn setup. Here's what your globals.css already looks like:
/* globals.css — your existing shadcn theme */
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--primary: 222.2 47.4% 11.2%;
--muted: 210 40% 96%;
--muted-foreground: 215.4 16.3% 46.9%;
--destructive: 0 84.2% 60.2%;
--border: 214.3 31.8% 91.4%;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
/* ... */
}
}That's it. No taw-ui-specific setup. Components read from these standard variables.
Token Mapping
Here's which shadcn tokens taw-ui components use, and where:
| Component Area | Token Used |
|---|---|
| Card backgrounds | bg-card |
| Primary text | text-foreground |
| Secondary text | text-muted-foreground |
| Borders | border |
| Accents / CTAs | text-primary, bg-primary |
| Error states | text-destructive, bg-destructive |
| Success indicators | text-emerald-600 dark:text-emerald-400 |
| Warning indicators | text-amber-600 dark:text-amber-400 |
For semantic colors like success and warning, components use Tailwind's built-in color utilities with dark: modifiers rather than shadcn tokens, since shadcn doesn't define these.
Dark Mode
Dark mode works the same way it does with shadcn — add the dark class to your <html> element. taw-ui components respond to the same .dark cascade. For semantic colors like success and warning, components use Tailwind's dark: modifier.
<!-- Dark mode toggle — same as any shadcn app -->
<html class="dark">
<!-- All taw-ui components automatically use dark theme values -->
</html>Customization
To customize taw-ui components, you have two paths:
Update the CSS variables in globals.css. All components — both shadcn and taw-ui — update automatically.
The component lives in your project. Open the file and change classes, layout, or behavior directly.
/* Want a warmer card background? Change the shadcn token */
:root {
--card: 30 20% 99%;
}Best Practices
emerald, amber, red) with dark: modifiers.dark counterparttaw-ui uses Tailwind v4's (--var) syntax for CSS variable references in utility classes. This is the standard approach in Tailwind v4 projects.
Troubleshooting
Make sure your shadcn setup is complete. Run npx shadcn@latest init if you haven't.
taw-ui uses standard shadcn tokens. Check that your globals.css defines --card, --foreground, --muted-foreground, --primary, --border, and --destructive.
Theming is simple because it's not ours.
taw-ui follows your shadcn theme. No custom tokens to learn, no extra CSS to import. Change your theme and every component updates with it.