Shadcn UI Ecosystem
Accessible React components, behavior primitives, copy-paste registries, and a code distribution platform for product UI.
Source Tweet Artifacts
Components
Full toolkit spanning form elements (inputs, selects, date pickers, combobox), navigation (sidebar, breadcrumbs, tabs, pagination), data display (tables, cards, charts, badges), overlays (dialog, drawer, sheet, popover, tooltip), and layout (accordion, collapsible, resizable panels). Supports theming, RTL, MCP server integration, and multiple form libraries (React Hook Form, TanStack Form).
The 2026 chat-interface release adds a more specific lesson for agent UI: conversation surfaces need behavior primitives, not only visual blocks. MessageScroller owns anchoring, streamed replies, saved-thread restore, prepended history, jump-to-message, scroll controls, and visibility tracking; Message, Bubble, Attachment, and Marker cover the surrounding transcript pieces. The separate scroll-fade and shimmer utilities handle polish around overflow and live status. The operating principle is "never move the reader against their intent." Source: X/@shadcn, 2026-06-26
As of 2026-07-04, shadcn is 4.13.0 and @shadcn/react is 0.2.0. @shadcn/react matters because it separates headless behavior from styled registry components: agents can use the tested message-scroller behavior while adapting the visual shell to a local design system. Source: npm registry via npm view, 2026-07-04 Source: GitHub shadcn-ui/ui, 2026-07-04
Charts
Copy-paste chart components built with Recharts that integrate directly with the shadcn/ui design system. Multiple area chart variants (default, linear, step, stacked, gradient), bar charts, line charts, pie charts, and radar charts. Designed for rapid dashboard assembly.
Blocks
Production-ready page templates with full React/Next.js code: dashboards with interactive charts and data tables, sidebar navigation variants, and login pages. Uses SidebarProvider, Breadcrumb, and other shadcn primitives. Open source, free forever.
The sidebar bookmark is a scale signal for app shells. A component that repeats across 50+ product surfaces stops being "navigation chrome" and becomes a governance primitive: information architecture, permissions, product-area grouping, active-state rules, responsive collapse, and badge semantics need to be reusable and locally owned. Use shadcn sidebars as editable shell infrastructure, then tighten the specific dashboard rules in Dashboard Design System. Source: X/@shadcn, 2026-06-20
Integration with This Wiki
The Dedalus design system and Design Tokens use shadcn/ui as the component foundation. The wiki's own UI is built with Tailwind CSS following similar patterns.
Registry ecosystem
Kevin-ranked third-party registries (blocks, motion, marketing layouts): Shadcn Registry Directory (Top Blocks). Source: User, 2026-05-11
The discovery route is now explicit: start with Component Library Sources, use Radix UI as the primitive/accessibility layer, use this page for shadcn conventions, then inspect Blocks.so, Chanh Dai Components, Evil Charts, Skiper UI, Cult UI, Magic UI, and React Bits when a screen needs richer blocks or examples. Source: User request, 2026-06-26
Beyond marketing blocks, the shadcn CLI also distributes domain-specific component systems. Plate (PlateJS) (Plate) is the shadcn/ui-native rich-text editor registry — a Slate-based plugin runtime plus copy-paste editor UI installed via npx shadcn@latest add @plate/editor-ai, with first-party AI and MCP. Source: platejs.org/docs, 2026-06-10 The registry model now reaches beyond DOM UI: Remocn ships Remotion video components (npx shadcn@latest add @remocn/...) and Mapcn ships MapLibre map components, both via the same CLI. Source: remocn.dev, 2026-06-12
The same source-registry pattern now covers motion micro-assets: Its Hover distributes animated React icon components through URLs like https://itshover.com/r/<icon-name>.json, while lucide-animated uses https://lucide-animated.com/r/<icon-name>.json. Treat these as editable source components, not opaque icon packs; the 2026-05-15 "263+ icons" UiSavior artifact is Its Hover evidence, not lucide-animated evidence. Source: GitHub itshover/itshover, 2026-07-04; GitHub pqoqubbw/icons, 2026-07-04
ReUI's free shadcn/ui Figma Design System is the design-tool mirror of this ecosystem: a Figma Community file aligned to shadcn/ui with the claimed full component set, variables/design tokens, component variants/states, and examples from the shadcn/ui docs. Use it for design handoff and token/reference alignment before implementation; do not treat the Figma file as version authority for the CLI or React source. Source: X/@reui_io, 2026-06-18; Source: Figma Community file, 2026-07-02
Component catalog workbench
The @uixmat component-catalog video turns shadcn docs into an internal design-system workbench. Each catalog card uses CardAction and DropdownMenu to jump to the source file, so an agent or designer can change a token, primitive, or variant and immediately preview the effect across selection controls, toggles, layout pickers, chart selectors, color pickers, and feedback components. This is the practical extension of copy-paste ownership: local components need a browsable catalog that maps every visual state back to editable source. Source: X/@uixmat and local video contact sheet review, 2026-07-04
CLI workflow (apply)
npx shadcn apply applies a full preset across a project in one command — swapping components, themes, colors, CSS variables, fonts, and icons together. The "apply, test, repeat" loop lets teams (and agents) try whole design systems without manual rewiring. Source: X/@shadcn, 2026-04-07
The reviewed demo video shows the real workflow: an existing app runs npx shadcn@latest apply --preset ..., then the same form/chart surface flips through multiple full presets - light neutrals, bright accent charts, dark green surfaces, red charts, and blue/lime buttons - without rebuilding the app from scratch. That makes apply a design-system iteration primitive for agents: try a complete preset, inspect the diff/visual result, then keep or revert. Source: local video artifact review, 2026-07-03
Current CLI/source snapshot on 2026-07-04: npm shadcn@4.13.0, dist tags latest: 4.13.0, rc: 4.10.0-rc.674ae44, canary: 4.2.0-canary.0, beta: 0.0.0-beta.01b72a3; GitHub shadcn-ui/ui default branch main at d0fae528221011f75a8c64a917073904c2847493, with the shadcn@4.13.0 tag at dfbde12ee53899c1a455c2b147f3de4b0409655d and @shadcn/react@0.2.0 tag at 4ff08be46665d17edcf4f35b6e2e1c16feca50d3. Source: npm registry; git ls-remote, 2026-07-04
Production starting points layer on top: the reviewed Toby Belhome reel shows six white-label admin shells for reference, project management, CRM, finance, crypto, and hospitality dashboards. The useful pattern is not a single template source; it is the shadcn/Tailwind dashboard grammar: quiet monochrome sidebars, metric cards, charts, tables, and dense work surfaces that can be retokenized for a real product. Treat these as layout references before reaching for a heavier commercial template kit. Source: X/@TobyBelhome and local video contact sheet, 2026-07-03
Timeline
- 2026-07-12 | Added the Shadcn Blocks and
shadcn/typesetrelease signals to the ecosystem evidence, alongside ReUI/visual-library references. They are reference and composition inputs; package/CLI authority remains the official shadcn release surface. Source: X Bookmark Ingest 2026-07-12; X/@khushiirl and @shadcn, 2026-07-04/09 - 2026-07-04 | Reviewed shadcn's sidebar scale signal: at 50+ sidebars, the component is app-shell governance, not ornamental navigation. Routed concrete sizing/state rules through Dashboard Design System. Source: X/@shadcn, 2026-06-20
- 2026-07-03 | Deep-reviewed Toby Belhome's shadcn/Tailwind/Next.js admin-dashboard template reel. Recorded the reusable pattern as dense dashboard starting points across reference, project, CRM, finance, crypto, and hospitality shells, not as a versioned source package. Source: X/@TobyBelhome, 2026-04-09; Source: local video contact sheet, 2026-07-03
- 2026-07-04 | Deep-reviewed @uixmat's component-catalog workbench video. Added the docs-as-design-system-workbench rule: every component catalog card should expose the source-file route and preview state changes across the local component set. Refreshed shadcn CLI authority to
shadcn@4.13.0. Source: X/@uixmat, 2026-06-21; Source: npm registry andgit ls-remote, 2026-07-04 - 2026-07-03 | Deep-reviewed the
npx shadcn applydemo video and official changelog. Recorded it as an existing-project preset-switching workflow for whole design-system trials, plus current npm/GitHub version evidence. Source: X/@shadcn, 2026-04-07; Source: shadcn/ui changelog - 2026-07-02 | Added ReUI's free shadcn/ui Figma Design System as a design-tool companion to the shadcn ecosystem: useful for component/token/state reference, not a package or CLI version source. Source: X/@reui_io, 2026-06-18
- 2026-06-26 | Added the explicit source route from Radix primitives to shadcn conventions to Blocks.so/Chanh Dai/Evil Charts/Skiper/Cult/React Bits so design-system packs do not bury special component sources. Source: User request, 2026-06-26
- 2026-06-28 | Added shadcn's chat-interface primitives as a behavior-first source for streaming UI: anchored turns, reader intent, saved-thread restore, prepended history, and visibility tracking. Source: X/@shadcn, 2026-06-26
- 2026-06-30 | Deep-reviewed the chat-interface artifacts and added versioned
@shadcn/react/scroll-faderouting plus shadcn-installable animated icon sources. Source: X/@shadcn, 2026-06-26; Source: X/@abhijitwt, 2026-06-27