How shadcn/ui works
shadcn/ui is an open-code component library and ecosystem: developers browse documentation and examples, use or customize components, and can install registry items or scaffold projects with the CLI. The repository also contains a chat-streaming helper library and React transcript-scroller primitives. The tree identifies additional product areas such as the visual designer, charts, colors, and style previews; their internal links are left unasserted where source was not sampled. Edges cite shown imports/calls or documented product context; dashed edges indicate unverified relationships.
Main entry points: chat.ts Chat API · use-message-scroller-controller.ts Scroller controller · page.tsx Documentation · react-router.ts Router template
Components 25
UI site
- Documentation
apps/v4/app/(app)/blocks/page.tsx - Component catalog
apps/v4/lib/components.ts - Block catalog
apps/v4/lib/blocks.ts - Theme designer
apps/v4/app/(app)/(create)/create/page.tsx - Style previews
apps/v4/app/(app)/(styles)/sera/page.tsx - Charts
apps/v4/app/(app)/charts/charts.tsx - Color palettes
apps/v4/lib/colors.ts
Registry and CLI
- Component registry
apps/v4/registry/__index__.tsx - Registry search
packages/registry/src/registry/search.ts - CLI search
packages/shadcn/src/commands/search.ts
Runtime libraries
- Chat API
packages/helpers/src/core/chat.ts - Chat IDs
packages/helpers/src/core/ids.ts - Event lowering
packages/helpers/src/core/lower.ts - Chat payloads
packages/helpers/src/core/payloads.ts - Turn streaming
packages/helpers/src/core/stream.ts - Event writer
packages/helpers/src/core/writer.ts - Scroller controller
packages/react/src/message-scroller/use-message-scroller-controller.ts - Scroll geometry
packages/react/src/message-scroller/geometry.ts - Scroll commands
packages/react/src/message-scroller/use-message-scroller-commands.ts - Scroller refs
packages/react/src/message-scroller/use-message-scroller-refs.ts - Scroller contracts
packages/react/src/message-scroller/types.ts
Project templates
- Template creation
packages/shadcn/src/templates/create-template.ts - Monorepo setup
packages/shadcn/src/templates/monorepo.ts - Router template
packages/shadcn/src/templates/react-router.ts
Other components
- Developer
Connections 19
- Developer → Documentation: browses
README.md - Developer → Theme designer: customizes
- Developer → CLI search: searches registry
- Documentation → Component catalog: presents
- Documentation → Block catalog: presents
- Registry search → Component registry: searches
- CLI search → Registry search: uses
packages/shadcn/src/commands/search.ts - Chat API → Chat IDs: creates IDs
packages/helpers/src/core/chat.ts - Chat API → Event lowering: lowers events
packages/helpers/src/core/chat.ts - Chat API → Chat payloads: creates payloads
packages/helpers/src/core/chat.ts - Chat API → Turn streaming: creates streams
packages/helpers/src/core/chat.ts - Chat API → Event writer: creates writers
packages/helpers/src/core/chat.ts - Scroller controller → Scroll geometry: measures scroll
packages/react/src/message-scroller/use-message-scroller-controller.ts - Scroller controller → Scroll commands: configures commands
packages/react/src/message-scroller/use-message-scroller-controller.ts - Scroller controller → Scroller refs: creates refs
packages/react/src/message-scroller/use-message-scroller-controller.ts - Scroller controller → Scroller contracts: uses contracts
packages/react/src/message-scroller/use-message-scroller-controller.ts - Router template → Template creation: configures
packages/shadcn/src/templates/react-router.ts - Router template → Monorepo setup: configures
packages/shadcn/src/templates/react-router.ts - Monorepo setup → Template creation: uses
packages/shadcn/src/templates/monorepo.ts