Component Library Sources

The canonical source shelf for component libraries agents should inspect before hand-rolling polished UI.

Kevin's design skills should expose more concrete sources: component libraries, CSS tricks, methods, and reference implementations. This page is the routing surface for that source shelf. It complements Design Engineering Resources: that page is the broad field index; this page is the practical "what component source should I inspect for this screen?" map. Source: User request, 2026-06-25

Routing Summary

When an agent is building visual UI, load the design skill first, then this page before hand-rolling animated, uncommon, chart, shader, or artifact-heavy components. This is the source shelf agents should use to avoid "I forgot the good libraries exist" failures.

The practical order is:

Ranking/source map: UI Library Ranking, Component Gallery, and Design Engineer Tools when the prompt is vague or the agent needs to pick the source family before choosing a library.
Foundation: Radix UI / Base UI / shadcn primitives.
Owned app components: Shadcn UI Ecosystem plus the local design system.
Agent-ready design systems: Astryx Design System and Cloudflare Kumo when their component model matches the target app.
Local component catalog: keep an app-owned docs catalog that previews component states and links each card back to its source file.
Design-tool companions: ReUI's shadcn/ui Figma Design System when Figma/token/state reference is needed before implementation.
Blocks and registries: Blocks.so, Shadcn Registry Directory (Top Blocks), Elements (Crafter Station), Dashboard Blocks / Efferd, Tailwind Plus Components, Origin UI, Magic UI, Aceternity, Shadcn Blocks, Shadcn Space, Shadcn Studio, Tailark.
Kevin-special sources: Kokonut UI, Bklit UI, Chanh Dai Components, Skiper UI, Cult UI, Evil Charts, Motion Primitives, Fancy Components, React Bits, Shaders.com.
Small sharp component libraries: Sonner and UI Primitives Shortlist for toasts, animated numbers, OTP input, command menus, virtualization, drag/drop, realtime chart lines, and knobs.
Implementation review: design-engineering-polish, Frontend and Design Skills, Frontend and Design Skills, and browser screenshots.

Default Order

Need	Start With	Why
Choose among UI libraries	UI Library Ranking	Rank behavior primitives, shadcn blocks, animated components, chart libraries, and small specialist primitives before loading every source page.
Unknown or generic UI primitive	Component Gallery	Name the exact component, synonyms, states, and accessibility expectations before prompting or selecting a library.
Broad design-engineering source discovery	Design Engineer Tools	Inspect the wider source shelf when the need might be inspiration, AI code tooling, motion, capture, 3D, interface design, fonts, or utilities rather than a component.
Behavior primitives	Radix UI or Base UI	Use headless, accessible primitives before rebuilding popovers, dialogs, menus, selects, and focus logic.
Project-owned base components	Shadcn UI Ecosystem	Copy-paste ownership, local tokens, Radix conventions, accessible primitives, charts, and blocks.
Local component catalog	App docs plus Shadcn UI Ecosystem conventions	Build a browsable workbench where each component card exposes the source-file route and preview states across variants.
shadcn-aligned Figma reference	ReUI shadcn/ui Figma Design System	Use when a designer or agent needs component/token/state parity in Figma before implementation.
Agent-ready design-system reference	Astryx Design System	React + StyleX-authored internals, themes, templates, CLI/docs, and agent-readable conventions from Meta.
Accessible packaged app components	Cloudflare Kumo	Cloudflare's Base UI-backed React library with CLI-readable component docs and Figma/token workflow.
Registry blocks	Blocks.so + Shadcn Registry Directory (Top Blocks)	Inspect Blocks.so, Tailark, Shadcn Blocks, Shadcn Studio, Shadcn Space, Kibo UI, Intent UI, SmoothUI, UI-Layouts, and 8bitcn before designing a standard app or marketing section from scratch.
Full-stack provider blocks	Elements (Crafter Station)	Inspect before building Next.js shadcn auth, AI, payments, uploads, rate limits, webhooks, SFX, loaders, PDF, or Claude Code hook UI.
Analytics dashboards	Dashboard Blocks / Efferd	Inspect before building admin, analytics, observability, ecommerce, finance, support, or marketing dashboards.
Animated shadcn sections and effects	Frontend and Design Skills	Loads Magic UI, React Bits, Skiper UI, Cult UI, Chanh Dai, Evil Charts, shader, and registry selection rules.
Editable React/Tailwind motion primitives	Motion Primitives	Use for common animated primitives before writing custom Motion code.
Animated Tailwind/shadcn components	Kokonut UI	Use for polished React/Next.js components built with Tailwind CSS, shadcn/ui, and Motion; install source through the shadcn registry command when adopting a component.
Uncommon shadcn components and templates	Skiper UI	Strong for distinctive Next.js + Tailwind + Motion components.
AI product blocks, animated blocks, templates	Cult UI	Strong for AI SDK agent patterns, artifacts, templates, and animated shadcn expansions.
Pixel-exact craft examples	Chanh Dai Components	Use for spacing, sharp component execution, docs/showcase structure, and Tailwind/shadcn craft.
Charts and dashboard treatments	Evil Charts + Bklit UI	Use for chart composition, shadcn/Recharts dashboard ideas, chart components, blocks, and Bklit Studio workflows before wiring real data.
Toasts and non-blocking feedback	Sonner	Use before hand-rolling React toast stacks; wrap locally and keep critical feedback inline instead of hiding it in a toast.
Structural animated effects	Magic UI	Good for beams, marquees, grids, shimmer, border beams.
Standalone microinteractions and WebGL backgrounds	React Bits	Good for text effects, docks, magnets, particles, Liquid Chrome, aurora/plasma effects, and shadcn/jsrepo installable motion components.
Shader and effect components	Shaders.com	Use for composable WebGPU shader components or agent-native shader search before hand-writing shader visuals.
CSS and frontend craft floor	Frontend Guidelines (Bendc) + CSS UI Enforcement	Keeps copied components semantic, accessible, tokenized, and maintainable.

Expanded Library Shelf

Source	Best for	Route
Component Gallery	Component names, synonyms, definitions, accessibility tags, and design-system examples.	Use before vague UI prompts; convert "make it better" into named primitives.
Design Engineer Tools	Broad design-engineering source discovery across inspiration, AI code tools, components, utilities, capture, fonts, motion, visual, 3D, and research.	Use when the correct source category is unknown.
Radix UI	Accessible headless primitives and Radix Themes when component behavior is the hard part.	Pair with shadcn or local tokens; do not invent focus/keyboard logic.
Base UI	Unstyled React primitives for accessible app-owned components and design systems.	Use when visual ownership is local but primitive behavior, complex inputs, menus, dialogs, popovers, or forms must be reliable.
Shadcn UI Ecosystem	Owned component primitives, registry distribution, Radix/Tailwind conventions, charts, and blocks.	Use as the default app-component base.
ReUI shadcn/ui Figma Design System	Figma-native shadcn component, token, variant, and state reference.	Use for design handoff and auditing visual parity; implementation still comes from shadcn/local source.
Astryx Design System	Agent-ready Meta design system: React components, themes, templates, CLI, and docs designed for humans and agents.	Use as a reference or adoption candidate when the app needs a full design-system substrate, not just a block.
Cloudflare Kumo	Cloudflare's accessible Base UI-backed React component library.	Use when packaged app components and CLI-readable docs beat local copy-paste primitives.
Blocks.so	Large shadcn/Radix/Base block catalog for app pages, dashboard sections, and quick variants.	Inspect before inventing common layout blocks.
Shadcn Registry Directory (Top Blocks)	High-signal shadcn registries: Shadcn Blocks, React Bits Pro, Shadcn Studio, Tailark, Aceternity, Shadcn Space, Magic UI.	Use for registry search and block selection.
Tailark	Shadcn marketing website blocks, pages, illustrations, and launch/product sections.	Use when the screen is a public marketing page, product page, pricing page, blog page, or landing page.
Shadcn Blocks	Very large shadcn/ui block, component, template, page-builder, IDE, CLI, and MCP source.	Use when breadth matters; recheck live counts and license/plan before citing or adopting.
Shadcn Studio	Radix/Base-supported shadcn components, blocks, templates, themes, Figma kit, AI tools, and MCP workflow.	Use when a broader kit/theme/template workflow matters, especially with Figma or AI-assisted install paths.
Shadcn Space	Blocks, templates, components, dashboard shells, Base/Radix support, Motion variants, CLI, builder, and MCP.	Use for Base/Radix-aware SaaS, dashboard, and app layouts.
Kibo UI	Accessible composable shadcn registry with components, blocks, and 1000+ patterns.	Use for functional components such as code blocks, dropzones, QR, Gantt, Kanban, table, tree, and dense app widgets.
Intent UI	Accessible React components built with React Aria Components and Tailwind CSS, plus blocks/templates/starter kits.	Use when React Aria behavior and owned copy/customization matter more than shadcn visual defaults.
SmoothUI	Animated React components and shadcn-compatible blocks with Motion/GSAP polish, public API, OpenAPI, and machine-readable catalog.	Use for AI-discoverable animated components and polished interaction blocks.
UI-Layouts	Broad source shelf for components, effects, design tools, ready-to-use blocks, premium blocks, and MCP.	Use for broad frontend inspiration when the exact component family is unclear.
8bitcn/ui	Open-source retro 8-bit copy-paste components, blocks, and themes.	Use for game, pixel, retro, and intentionally stylized UI, not default product dashboards.
Elements (Crafter Station)	Trusted shadcn registry with full-stack provider blocks for auth, AI, payments, uploads, rate limiting, dev tools, SFX, and Claude Code hooks.	Use when a Next.js app needs real provider-integrated blocks; inspect registry JSON and retokenize before adoption.
Dashboard Blocks / Efferd	Dense shadcn/Base/Radix analytics dashboards: KPI rows, chart cards, funnels, heatmaps, app shells, and date/filter/customize toolbars.	Use as dashboard composition reference before wiring real data.
Skiper UI	Uncommon editable shadcn/Next.js components.	Use after base shadcn when a screen needs specificity.
Cult UI	Animated shadcn blocks, AI-agent artifacts, templates.	Use for agent/product surfaces and animated blocks.
Chanh Dai Components	Pixel-exact Tailwind/shadcn components and design-engineering showcase patterns.	Study implementation detail, density, spacing, and component demo format.
Evil Charts	Chart components and dashboard chart treatments for shadcn/Recharts-style products.	Use for chart UI references, then wire data access separately.
Bklit UI	shadcn/ui-based chart and data visualization components, chart blocks, and a Studio workflow.	Use for chart-heavy product surfaces before hand-rolling chart components or dashboards.
Sonner	React toast and notification component.	Use for compact, non-blocking feedback before writing custom toast stacks; wrap behind local app APIs.
Motion Primitives	Open-source React/Tailwind motion components built with Motion.	Use for editable microinteractions and animated primitives; verify reduced motion.
Kokonut UI	100+ modern React/Next.js components built with Tailwind CSS, shadcn/ui, and Motion.	Use for animated shadcn-aligned components when the app needs more polish than base blocks; retokenize after install.
Magic UI	150+ React/TypeScript/Tailwind/Motion animated components and effects for shadcn-style projects.	Use for section-level animated effects such as beams, grids, marquees, shimmer, and border treatments.
React Bits	Animated backgrounds, text effects, docks, magnets, particles, Liquid Chrome, creative tools, and agent-readable component docs.	Use for expressive React effects; install through shadcn/jsrepo when useful, then retokenize and verify motion/accessibility.
Shaders.com	Composable WebGPU shader effects and agent-native shader search/install via MCP/Bolt.	Use for shader effects when the UI needs real visual material, not flat decoration.
Fancy Components	Fun/weird animated React components and microinteractions.	Inspect for playful microinteractions, backgrounds, and small expressive pieces.
Origin UI	Copy-paste React/Tailwind app UI variants.	Inspect when shadcn primitives need many ready-made variants.
Tailwind Plus Components	Official Tailwind marketing/app/ecommerce blocks and Catalyst.	Use when speed and conventional polish matter more than uniqueness.
Embla Carousel examples	Carousel behavior and layout references.	Use for carousel mechanics before styling.
Plate (PlateJS)	Rich-text/editor surfaces on React + shadcn.	Use when the component is an editor, not a static form.
Fumadocs	Documentation UI/framework patterns.	Use for docs surfaces and componentized docs navigation.
v0 yacht scrollytelling template	One-off cinematic scrollytelling reference.	Study structure only; do not treat as a default template.

Agent Use Protocol

Load the appropriate design skill first: design-engineering-polish, Frontend and Design Skills, or Frontend and Design Skills.
Search UI Library Ranking, this page, UI Component Vocabulary, and Design Engineering Resources before inventing a component from scratch.
Pick one source library per component family. Avoid mixing many animated libraries in one viewport.
Copy code into the project, then retokenize: color, radius, spacing, shadows, typography, and motion.
Add or update the local component catalog entry so states, variants, and source-file routes remain inspectable.
Verify dependencies in package.json. Add only what the copied component actually needs.
Run motion review. Frequent UI should stay fast and quiet; rare marketing moments may be expressive.

Coverage Audit

Family	Covered route	Status
Agent-ready design systems	Astryx Design System, Cloudflare Kumo	First-class pages, active-stack links, package snapshots.
Behavior primitives	Radix UI, Base UI, Shadcn UI Ecosystem	First-class pages; use before custom keyboard/focus/overlay code.
Uncommon/animated shadcn sources	Skiper UI, Cult UI, Kokonut UI, Magic UI, React Bits, Fancy Components, Motion Primitives	First-class pages after 2026-07-07 audit.
Chart/dashboard sources	Bklit UI, Evil Charts, Dashboard Blocks / Efferd, Blocks.so	Bklit and Evil Charts are first-class; Efferd remains a dashboard-specific external source row.
Registry/block long tail	Shadcn Registry Directory (Top Blocks), Tailark, 8bitcn, Kibo UI, Intent UI, SmoothUI, UI-Layouts, Shadcn Blocks, Shadcn Studio, Shadcn Space	Covered by the registry directory and UI Library Ranking. Promote individual pages only when adoption or repeated lookup needs more detail.
Focused small primitives	Sonner, UI Primitives Shortlist	Sonner is first-class for toast/notification feedback; Emil Kowalski's remaining NumberFlow, input-otp, Liveline, Leva, cmdk, Virtuoso, and dnd kit list stays covered as one combined shortlist.
Motion/WebGL libraries	Motion Library Ranking, Motion.dev, Web3D Library Ranking, Frontend and Design Skills, Frontend and Design Skills, Frontend and Design Skills	Motion.dev is first-class; Anime/Three/R3F remain executable skill routes plus ranking pages.

Anti-Patterns

Shipping the library default aesthetic.
Adding a component because it is impressive rather than because the screen needs it.
Combining multiple perpetual animations in the first viewport.
Importing a whole package or registry when one copied component would do.
Letting template demo data, fake logos, or generic copy leak into product UI.

Timeline

2026-07-07 | Promoted Sonner into the component shelf as the first-class React toast/notification route, while keeping the rest of Emil Kowalski's small-primitive list consolidated under UI Primitives Shortlist. Source: User request, 2026-07-07; https://sonner.emilkowal.ski/; https://github.com/emilkowalski/sonner
2026-07-07 | Promoted Base UI into the canonical component shelf as a first-class primitive source beside Radix UI and Shadcn UI Ecosystem. Source: User request, 2026-07-07; https://base-ui.com/; https://github.com/mui/base-ui
2026-07-07 | Added explicit coverage for Emil Kowalski's focused small-primitive list through UI Primitives Shortlist instead of creating separate stub pages. Source: User request, 2026-07-07; https://x.com/emilkowalski/status/2074169272717152716
2026-07-07 | Audited named component and motion source coverage; promoted Kokonut UI, Bklit UI, Magic UI, and Motion.dev into first-class routes and added a coverage table for design systems, primitives, animated shadcn sources, charts, registries, and WebGL/motion routes. Source: User request, 2026-07-07
2026-07-06 | Added Kevin's additional shadcn/block source set to the canonical component shelf: Blocks.so, Tailark, 8bitcn, Kibo UI, Intent UI, SmoothUI, UI-Layouts, Shadcn Blocks, Shadcn Studio, and Shadcn Space. Source: User request, 2026-07-06
2026-07-02 | Added ReUI's free shadcn/ui Figma Design System as the Figma/token/state companion for shadcn-aligned design handoff. Source: X/@reui_io, 2026-06-18
2026-07-04 | Added @uixmat's component-catalog workbench rule: app-owned component libraries need docs cards that preview state changes and route directly to the source file. Source: X/@uixmat, 2026-06-21
2026-06-30 | Refreshed the OrcDev top-five shadcn source set. Treat Shadcn Blocks/Tailark as marketing-section sources, React Bits Pro as expressive motion/effects, Shadcn Studio as theme/editor/template shelf, and Shadcn Space as Base UI/Radix/dashboard/layout block shelf. Source: X/@orcdev, 2026-04-16
2026-06-30 | Added Elements (Crafter Station) as a first-class shadcn registry source after deep-reviewing the X bookmark, local README screenshot, live site, and GitHub source. Source: X/@tom_doerr, 2026-03-16; https://github.com/crafter-station/elements
2026-06-30 | Added vocabulary-first routing from the deep review of @itsandrewgao's Component Gallery demo and @remvze's Design Engineer Tools screenshot: name the primitive and inspect the broad source shelf before choosing a concrete component library. Source: X/@itsandrewgao, 2026-02-28; X/@remvze, 2026-03-14; https://component.gallery/; https://designengineer.tools/
2026-06-29 | Promoted React Bits from existing shelf mention to an explicit first-class component source with current official install/docs details: shadcn/jsrepo routes, llms.txt, MCP setup docs, four variants per component, and license caveat. Source: User request, 2026-06-29; https://reactbits.dev/; https://reactbits.dev/llms.txt
2026-06-29 | Added Astryx Design System, Cloudflare Kumo, and Motion Primitives as first-class component sources with version snapshots and routing. Astryx and Kumo move out of hub-only bookmark status because their source/docs/packages are now audited. Source: User request, 2026-06-29; GitHub facebook/astryx; GitHub cloudflare/kumo; GitHub ibelick/motion-primitives
2026-06-30 | Added Dashboard Blocks / Efferd as the dashboard-specific block source after deep-reviewing four launch screenshots and the live registry page. Source: X/@shabanhr, 2026-05-22; https://efferd.com/blocks/dashboard
2026-06-26 | Promoted the missing special component/effect sources into the canonical shelf: Chanh Dai Components, Evil Charts, Radix UI, Blocks.so, Fancy Components, Origin UI, and Shaders.com, then expanded the routing summary so design/design-system packs load them directly. Source: User request, 2026-06-26; https://chanhdai.com/components/showcase; https://evilcharts.com/docs; https://www.radix-ui.com/; https://blocks.so/; https://www.fancycomponents.dev/; https://github.com/shadcn/originui; https://shaders.com/
2026-06-25 | Expanded from Skiper/Cult into Kevin's design-folder component shelf: shadcn/ui, React Bits Liquid Chrome, Fancy Components, Tailwind Plus UI Blocks, Embla examples, Chánh Đại, Evil Charts, Plate, Fumadocs, and the one-off v0 scrollytelling reference. Source: raw/notes/design-folder-sites-2026-06-25.md
2026-06-25 | Page created after Kevin asked for stronger design skills, more component libraries, and better source-of-truth discovery in new conversations. Source: User request, 2026-06-25

Source: User request, 2026-06-25

Source: X/@reui_io, 2026-06-18

Source: X/@uixmat, 2026-06-21

Source: X/@orcdev, 2026-04-16

Source: raw/notes/design-folder-sites-2026-06-25.md