cameleer/design-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: add consumer usage guide for @cameleer/design-system package
Some checks failed
Build & Publish / publish (push) Has been cancelled
Details

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-03-18 20:34:23 +01:00
parent 3be4c0a976
commit 92ea8673fc
2 changed files with 80 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
COMPONENT_GUIDE.md
View File

@@ -204,23 +204,26 @@ URL-driven progressive filtering: /agents → /agents/:appId → /agents/:appId/
## Import Paths
### Within this repo (design system development)
```tsx
// Primitives
import { Button, Input, Badge, ... } from './design-system/primitives'
// Composites
import { DataTable, Modal, Toast, ... } from './design-system/composites'
import type { Column, SearchResult, FeedEvent, ... } from './design-system/composites'
// Layout
import { Button, Input, Badge } from './design-system/primitives'
import { DataTable, Modal, Toast } from './design-system/composites'
import type { Column, SearchResult, FeedEvent } from './design-system/composites'
import { AppShell } from './design-system/layout/AppShell'
import { Sidebar } from './design-system/layout/Sidebar'
import { TopBar } from './design-system/layout/TopBar'
// Theme
import { ThemeProvider, useTheme } from './design-system/providers/ThemeProvider'
```
### From consuming apps (via npm package)
```tsx
import '@cameleer/design-system/style.css' // once at app root
import { Button, Input, Modal, DataTable, AppShell, ThemeProvider } from '@cameleer/design-system'
import type { Column, DataTableProps, SearchResult } from '@cameleer/design-system'
```
See `CLAUDE.md` "Using This Design System in Other Apps" for full setup instructions.
## Styling Rules
- **CSS Modules only** — no inline styles except dynamic values (width, color from props)