How puranderdua8/ui-design-system works
This monorepo packages a token-driven React design system and presents it through a portfolio site and interactive playground. The user workflow is to browse the site’s component categories, inspect live examples and their source, then consume the UI package in an application. The README also describes theme variants and token tiers, but their source files are absent from the supplied tree, so those internals are not mapped. Relationships reflect shown imports or documented capabilities; unsampled implementation links are omitted.
Main entry points: index.ts Package exports · components Form controls · [category]/page.tsx Category pages · components/page.tsx Category index
Components 19
Site showcase
- Portfolio home
apps/site/src/app/page.tsx - Category index
apps/site/src/app/components/page.tsx - Category pages
apps/site/src/app/components/[category]/page.tsx - Category definitions
apps/site/src/lib/categories.ts - Category examples
apps/site/src/components/category-pages.tsx - Example frame
apps/site/src/components/example.tsx
UI package
- Typography
packages/ui/src/components - Actions
packages/ui/src/components - Layout
packages/ui/src/components - Form controls
packages/ui/src/components - Display components
packages/ui/src/components - Field wiring
packages/ui/src/components/field.tsx - Fieldset wiring
packages/ui/src/components/fieldset.tsx - Select control
packages/ui/src/components/select.tsx - Package exports
packages/ui/src/index.ts
Playground
- CSS playground
packages/ui/playground/src/main.tsx
Themes
- Theme variants
- Token tiers
Other components
- Site visitor
Connections 22
- Site visitor → Portfolio home: opens
apps/site/src/app/page.tsx - Site visitor → Category index: browses
apps/site/src/app/components/page.tsx - Category index → Category definitions: reads categories
apps/site/src/app/components/page.tsx - Category pages → Category definitions: looks up category
apps/site/src/app/components/[category]/page.tsx - Category pages → Category examples: selects content
apps/site/src/app/components/[category]/page.tsx - Category examples → Example frame: renders examples
apps/site/src/components/category-pages.tsx - Example frame → Package exports: uses UI components
apps/site/src/components/example.tsx - Portfolio home → Package exports: uses UI components
apps/site/src/app/page.tsx - Category index → Package exports: uses UI components
apps/site/src/app/components/page.tsx - Category pages → Package exports: uses UI components
apps/site/src/app/components/[category]/page.tsx - Package exports → Typography: exports
packages/ui/src/index.ts - Package exports → Actions: exports
packages/ui/src/index.ts - Package exports → Layout: exports
packages/ui/src/index.ts - Package exports → Form controls: exports
packages/ui/src/index.ts - Package exports → Display components: exports
packages/ui/src/index.ts - Form controls → Field wiring: includes
packages/ui/src/index.ts - Form controls → Fieldset wiring: includes
packages/ui/src/index.ts - Form controls → Select control: includes
packages/ui/src/index.ts - Select control → Field wiring: reads context
packages/ui/src/components/select.tsx - Site visitor → CSS playground: previews styles
packages/ui/playground/src/main.tsx - Token tiers → Theme variants: defines roles
- Theme variants → Package exports: styles components