@gp/ui Design System
TheGP's shared React component library with Tailwind theme integration.
Quick Reference
Import: import { Button, Card, Layout } from '@gp/ui'
Theme: @import "@gp/ui/theme"; in CSS
Icons: import { SearchIcon, UserIcon } from '@gp/ui'
Available Components
| Component |
Purpose |
| Button |
Primary actions with variants: primary, secondary, ghost, destructive |
| Badge |
Status indicators: success, warning, error, info, neutral |
| Card |
Container with Card.Header, Card.Body, Card.Footer |
| StatCard |
Metric display with optional trend indicator |
| StatGrid |
Key-value grid with formatting and copy support |
| Alert |
Notifications: info, warning, error, success |
| Input |
Text input with label, icons, validation states |
| TextArea |
Multi-line input with auto-resize |
| Modal |
Dialog overlays (Radix-based) with sizes, controlled/uncontrolled state |
| Dropdown |
Menu system (Radix-based) with items, checkboxes, submenus |
| Tooltip |
Hover hints (Radix-based) |
| TabBar |
Horizontal tab navigation |
| Layout |
App shell with header, sidebar, user menu |
| Sidebar |
Collapsible navigation with responsive behavior |
| Skeleton |
Loading placeholders |
| LoginPage |
Full-screen login with branding |
| GPLogo |
TheGP logo SVG |
Resources
Load these as needed:
- references/components.md: Complete component API reference with props and examples
- references/setup.md: Installation, Tailwind v4 integration, peer dependencies
- references/design-guide.md: Colors, typography, spacing conventions
- references/icons.md: Available icon exports and naming conventions
Key Patterns
Class Merging
Always use cn() for combining classes:
import { cn } from '@gp/ui'
<div className={cn('base-class', condition && 'conditional-class', className)} />
Compound Components
Card, Dropdown, Tooltip use dot notation:
<Card>
<Card.Header>Title</Card.Header>
<Card.Body>Content</Card.Body>
</Card>
Semantic Icons
Icons named by purpose, not appearance:
import { BackIcon, SpinnerIcon, DeleteIcon } from '@gp/ui'
Theme Tokens
Custom Tailwind colors available after importing theme:
orange-50 to orange-900 (brand orange)navy-50 to navy-950 (dark navy)cream (off-white background)
Peer Dependencies
Apps must install: react, react-dom, lucide-react, @radix-ui/react-dialog, @radix-ui/react-dropdown-menu, @radix-ui/react-tooltip, @radix-ui/react-label
1---2name: gp-ui3description: Use when building React UIs for TheGP applications, migrating existing UIs to @gp/ui components, integrating Tailwind v4 with @gp/ui theme, or answering questions about available components, design tokens, icons, or setup. Activate when user mentions @gp/ui, TheGP design system, or asks about GP-specific UI patterns and components.4---5
6# @gp/ui Design System
7
8TheGP's shared React component library with Tailwind theme integration.
9
10## Quick Reference
11
12**Import**: `import { Button, Card, Layout } from '@gp/ui'`
13**Theme**: `@import "@gp/ui/theme";` in CSS
14**Icons**: `import { SearchIcon, UserIcon } from '@gp/ui'`
15
16## Available Components
17
18| Component | Purpose |
19|-----------|---------|
20| Button | Primary actions with variants: primary, secondary, ghost, destructive |
21| Badge | Status indicators: success, warning, error, info, neutral |
22| Card | Container with Card.Header, Card.Body, Card.Footer |
23| StatCard | Metric display with optional trend indicator |
24| StatGrid | Key-value grid with formatting and copy support |
25| Alert | Notifications: info, warning, error, success |
26| Input | Text input with label, icons, validation states |
27| TextArea | Multi-line input with auto-resize |
28| Modal | Dialog overlays (Radix-based) with sizes, controlled/uncontrolled state |
29| Dropdown | Menu system (Radix-based) with items, checkboxes, submenus |
30| Tooltip | Hover hints (Radix-based) |
31| TabBar | Horizontal tab navigation |
32| Layout | App shell with header, sidebar, user menu |
33| Sidebar | Collapsible navigation with responsive behavior |
34| Skeleton | Loading placeholders |
35| LoginPage | Full-screen login with branding |
36| GPLogo | TheGP logo SVG |
37
38## Resources
39
40Load these as needed:
41
42- **[references/components.md](references/components.md)**: Complete component API reference with props and examples
43- **[references/setup.md](references/setup.md)**: Installation, Tailwind v4 integration, peer dependencies
44- **[references/design-guide.md](references/design-guide.md)**: Colors, typography, spacing conventions
45- **[references/icons.md](references/icons.md)**: Available icon exports and naming conventions
46
47## Key Patterns
48
49### Class Merging
50Always use `cn()` for combining classes:
51```tsx
52import { cn } from '@gp/ui'
53<div className={cn('base-class', condition && 'conditional-class', className)} />
54```
55
56### Compound Components
57Card, Dropdown, Tooltip use dot notation:
58```tsx
59<Card>
60 <Card.Header>Title</Card.Header>
61 <Card.Body>Content</Card.Body>
62</Card>
63```
64
65### Semantic Icons
66Icons named by purpose, not appearance:
67```tsx
68import { BackIcon, SpinnerIcon, DeleteIcon } from '@gp/ui'
69```
70
71## Theme Tokens
72
73Custom Tailwind colors available after importing theme:
74- `orange-50` to `orange-900` (brand orange)
75- `navy-50` to `navy-950` (dark navy)
76- `cream` (off-white background)
77
78## Peer Dependencies
79
80Apps must install: `react`, `react-dom`, `lucide-react`, `@radix-ui/react-dialog`, `@radix-ui/react-dropdown-menu`, `@radix-ui/react-tooltip`, `@radix-ui/react-label`
majiayu000