UI Components & Design System
An overview of the component library and design tokens used in BloggFast.
Last updated:
Tailwind CSS
BloggFast uses Tailwind CSS v4 with PostCSS. Global styles and CSS custom properties are defined in src/app/globals.css. Tailwind v4 uses a CSS-first configuration approach — customizations go in the CSS file rather than a JS config file.
shadcn/ui components
UI components (buttons, inputs, dialogs, dropdowns, etc.) are built on shadcn/ui, which uses Radix UI primitives for accessibility. Components live in src/components/ui/ and are fully customizable — edit them directly.
Tip
npx shadcn@latest add [component-name]Typography
| Font | Variable | Used for |
|---|---|---|
| Cabinet Grotesk | --font-display | Headings, logo |
| Inter | --font-sans | Body text, UI |
| System mono | — | Code blocks |
Dark mode
Dark mode is controlled by a .dark class on the <html> element (set via ThemeProvider). The user's preference is persisted in localStorage. Use dark: Tailwind variants for dark-mode-specific styles throughout the app.