Shadcn
Overview
Shadcn is not a traditional component library — it is a collection of accessible, copy-paste components built on top of Radix UI primitives. Components are added directly into your project as source files rather than installed as a package, giving you full control over the code. Styling is done via Tailwind CSS utility classes.
Project Files
| File | Purpose |
|---|---|
shadcn.css | Overrides Shadcn's required @theme inline definitions |
shadcnReset.css | Shadcn's default resets to standard HTML components |
tailwind.css | Overrides or extends @theme inline definitions |
Configuration
Theme
Tailwind's @theme inline block is how custom CSS variables become utility classes (can be used anywhere in the project and other library's components).
shadcn.css customises Shadcn's installation defaults so that the out-of-the-box components reflect the project's design:
/* shadcn.css */
@theme inline {
--color-background: var(--custom-color-background);
--color-foreground: var(--custom-color-foreground);
--color-primary: var(--custom-color-primary);
--color-primary-foreground: var(--custom-color-primary-foreground);
--radius-md: var(--custom-radius-md);
}tailwind.css overrides and extends Tailwind's utility claseses.
The example below shows how this project overrides the standard Tailwind font size utilities (text-base, text-sm, text-lg):
/* tailwind.css */
@theme inline {
--text-base: var(--custom-font-size-body);
--text-sm: var(--custom-font-size-body-small);
--text-lg: var(--custom-font-size-h6);
}The example below shows how the project extends the Tailwind font size (text-*), font family (font-*) and spacing (p-*, m-*, gap-*) utilities:
/* tailwind.css */
@theme inline {
/* Unlocks className="font-heading" and className="font-body" */
--font-heading: var(--font-family-heading);
--font-body: var(--font-family-body);
/* Unlocks className="text-h1" */
--text-h1: var(--custom-font-size-h1);
/* Unlocks className="m-medium", className="gap-large", className="w-medium" and so much more! */
--spacing-medium: var(--custom-spacing-md);
--spacing-large: var(--custom-spacing-lg);
}Reset
shadcnReset.css contains resets to stanard HTML elements needed by Shadcn.
By default, when configuring Shadcn to a new or existing project, it automatically has the following override:
* {
@apply border-border outline-ring/50;
}This applies the HTML's default border color and outline color.
Light & Dark Mode
Shadcn's dark: variant is configured in tailwind.css using:
@custom-variant dark (&:is(.dark *));This tells Tailwind to apply dark: utilities whenever an element is inside a dark ancestor.
No Provider Needed
Unlike some of the other libraries in this project, when next-themes toggles dark on <html>, the color variables in colors-dark.css also activate.
Both the CSS tokens and the Tailwind dark: utilities respond automatically, allowing for light / dark toggle without a Provider.
Components
All Shadcn components work exactly as documented. They are added to the project via command line installation pnpm dlx shadcn-ui@latest add <component> or copying and pasting.