Installation
How to install and configure the Retents Design System in your project.
Install the package
pnpm add @retents/uiInstall peer dependencies
The core peer dependencies required by most components:
pnpm add class-variance-authority lucide-react tw-animate-cssSome components require additional peer dependencies. Check individual component pages for specifics.
Configure Tailwind CSS v4
Import the design system tokens and theme in your CSS entry point:
@import "tailwindcss";
@import "tw-animate-css";
@import "@retents/ui/tokens.css";
@import "@retents/ui/theme.css";
@source "./node_modules/@retents/ui/src/**/*.tsx";
@layer base {
* {
border-color: hsl(var(--border));
}
body {
background-color: hsl(var(--background));
color: hsl(var(--foreground));
}
}The @source directive is required so that Tailwind v4 knows to scan the component files and generate the utility classes they use. Without it, classes like bg-primary won't be included in your CSS output.
No tailwind.config.js needed — Tailwind v4 uses CSS-first configuration.
Import components
You can import from the barrel export:
import { Button, Card, Input } from "@retents/ui"Or use subpath imports for better tree-shaking:
import { Button } from "@retents/ui/button"
import { Card, CardContent } from "@retents/ui/card"Dark mode
The design system uses class-based dark mode. Add the dark class to your <html> element to activate dark theme. If you're using Next.js, next-themes handles this automatically.