# Atlas UI

> Atlas design system knowledge - components, patterns, and theming

- Skill: `majiayu000/atlas-ui` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/atlas-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/atlas-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/atlas-ui

---


# 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-react` for all icons
- Import: `import { IconName } from "lucide-react"`

## Forms

- React Hook Form + Zod for validation
- Use `@hookform/resolvers/zod` for schema integration
- Pattern: define Zod schema → create form with useForm → render with Form components

## Data Display

- Charts: `recharts` library
- Tables: custom implementations with pagination
- PDF export: `jspdf` + `jspdf-autotable`
- Excel export: `xlsx` library