This whole registry and philosophy is available as a Claude Code Agent Skill — install it and Claude builds UI with it directly.
Install the Skill →Small apps, not just components.
A single Button or Switch in isolation doesn’t tell you much about how it holds up in real layout. These are small, realistic compositions — a sign-in form, a settings panel, a team list, a dashboard, pricing tiers, a live search — built entirely from the same registry components shown on their own elsewhere on this site.
Sign in
Card + Input + Checkbox + Button — a real auth form, not a lorem-ipsum mockup.
Welcome back
Sign in to your dsgn account.
Settings panel
Card + Switch + Select + Separator — a preferences screen, staged not mutated.
Preferences
Changes apply on Save, not as you toggle them.
Team list
Avatar + Badge + DropdownMenu — a real list with per-row actions.
Stat row
Real numbers about this project — not placeholder dashboard data.
23
Registry components
3
Case studies
9
Philosophy pillars
Project dashboard
Table + Badge + Skeleton — the real 3 case studies, plus a loading row for contrast.
Case studies
Every project this design philosophy was extracted from.
| Project | Stack | Status |
|---|---|---|
| lyric-viewer | Tauri 2 + Rust | Shipped |
| file-viewer | .NET / WPF | Shipped |
| review-grader | Angular 17.3 | Shipped |
Pricing tiers
Card + Badge + Button — a 3-tier plan layout (illustrative pattern, not an actual dsgn plan).
Community
Everything in the registry, MIT licensed.
Free
- Full component registry
- npx @dhruvchoudhary/dsgn add
- Unlimited projects
Team
For teams standardizing on one registry.
Custom
- Everything in Community
- Private component registry
- Shared token overrides
Enterprise
SSO, audit logs, dedicated support.
Custom
- Everything in Team
- SSO / SAML
- Dedicated support channel
Component search
Command — searching this registry's real component list, not sample data.
Delete confirmation
Dialog + Alert — a destructive action that explains its consequence before committing.
FAQ
Accordion — real, checkable answers about this project, not filler copy.
Feedback form
Tabs + Textarea + RadioGroup — a two-mode form, not just a single text field (illustrative UI, doesn't submit anywhere real).
Send feedback
Install flow: in progress, then empty
Progress + EmptyState — the two states either side of `dsgn add`, not a static screenshot of one.
Installing button...
npx @dhruvchoudhary/dsgn add button
No components installed yet
Run dsgn add to copy your first component into this project.
Toolbar with tooltips + filter popover
Tooltip + Popover — icon-only actions that stay legible, and a filter panel that doesn't need a full dialog.