Type: Technical documentation Location:
apps/client/src/components/ui/andapps/client/src/styles/globals.css
The design system is integrated directly into apps/client. It's based on shadcn/ui components with Tailwind CSS 4 for styling.
| Element | Details |
|---|---|
| Components | Based on shadcn/ui, in apps/client/src/components/ui/ |
cn() utility |
Combines clsx + tailwind-merge in apps/client/src/lib/utils.ts |
| Theme | CSS tokens in src/styles/globals.css — colors, radius, typography |
| Primary color | Teal (172 66% 40%) — evokes data, analytics, performance |
| Typography | Inter Variable via @fontsource-variable/inter |
| Modes | Light + Dark (dark = primary mode), via .dark class on <html> |
| Adding components | cd apps/client && pnpm dlx shadcn@latest add <component> |
Components are imported via the @/ alias:
import { Button } from '@/components/ui/button'
| Component | Choice | Details |
|---|---|---|
| API Specification | OpenAPI (Swagger) | Single source of truth for the Back ↔ Front contract |
| Front client generation | Orval | Auto-generates API clients and TypeScript types |
| Fetching & client cache | TanStack Query (React Query) | Client-side cache and sync state management |
| Forms | React Hook Form + Zod | Declarative client-side validation, integrated with shadcn/ui Form |