# UI Design System > Guide to the UI/CSS architecture, including Tailwind, Shadcn UI, and Theming. Use when this capability is needed. - Skill: `tomevault-io/ui-design-system-2` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/ui-design-system-2` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/ui-design-system-2/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/ui-design-system-2 --- # UI Design System Guide Docklift uses a modern UI stack built on standards-compliant technologies. ## Tech Stack - **Framework**: Tailwind CSS (v3 with `tailwindcss-animate` plugin) - **Component Library**: Shadcn UI (Headless Radix UI + Tailwind) - **Icons**: Lucide React - **Theming**: `next-themes` (Dark/Light mode support) - **Fonts**: Geist Sans & Geist Mono (via `next/font`) ## Tailwind Configuration Found in `frontend/tailwind.config.ts`. It uses CSS variables for colors to support dynamic theming (dark/light mode). ### Key Colors (HSL vars) - `bg-background` / `text-foreground`: Main page colors. - `bg-card` / `text-card-foreground`: Card elements. - `bg-primary` / `text-primary-foreground`: Main actions (buttons). - `bg-muted` / `text-muted-foreground`: Secondary text/backgrounds. - `bg-destructive`: Error states. ## Shadcn UI Components Located in `frontend/components/ui/`. These are **not** an installed library but copy-pasted code you own. ### Core Components - `button.tsx`: Variants (default, destructive, outline, secondary, ghost, link). - `card.tsx`: Structure for widgets (Header, Title, Content). - `dialog.tsx`: Modals. - `input.tsx` / `textarea.tsx`: Form elements. - `sonner.tsx`: Toast notifications. ### Customizing Components To change a component's look, edit the file directly in `components/ui/`. Example: To make all buttons rounded, edit `frontend/components/ui/button.tsx`. ## Layouts & Structure - **Responsiveness**: Mobile-first approach using standard Tailwind breakpoints (`sm:`, `md:`, `lg:`). - **Containers**: Use `container mx-auto px-4` for page content wrappers. ## Troubleshooting Styles - **"Styles missing"**: ensure the file path is included in `tailwind.config.ts` content array. - **"Dark mode not working"**: Ensure `ThemeProvider` wraps the app in `layout.tsx`. --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/ssujitx) — claim your Tome and manage your conversions.