majiayu000 Atlas UI Design System
Component Library
Atlas uses shadcn/ui as the base with custom branded components in client/src/components/atlas/.
Available Base Components (shadcn/ui)
Accordion, AlertDialog, AspectRatio, Avatar, Checkbox, Collapsible, ContextMenu, Dialog, DropdownMenu, HoverCard, Label, Menubar, NavigationMenu, Popover, Progress, RadioGroup, ScrollArea, Select, Separator, Slider, Slot, Switch, Tabs, Toast, Toggle, ToggleGroup, Tooltip
Custom Atlas Components
Located in client/src/components/atlas/:
- Custom branded variants of base components
- Enterprise-specific UI patterns
Utility Functions
cn()from@/lib/utils— merges Tailwind classes (clsx + tailwind-merge)class-variance-authority(cva) — component variant definitions
Theming
- Dark/light mode via
next-themes - CSS custom properties for colors
- Tailwind config in
tailwind.config.ts
Icons
- Use
lucide-reactfor all icons - Import:
import { IconName } from "lucide-react"
Forms
- React Hook Form + Zod for validation
- Use
@hookform/resolvers/zodfor schema integration - Pattern: define Zod schema → create form with useForm → render with Form components
Data Display
- Charts:
rechartslibrary - Tables: custom implementations with pagination
- PDF export:
jspdf+jspdf-autotable - Excel export:
xlsxlibrary