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, Originkit, 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, Cloud, Data, and Service Skills, and browser screenshots.
Large "500+ components/styles/prompts/skill/MCP" collections remain discovery sources, not default dependencies. Name the component with UI Component Vocabulary, inspect the smallest appropriate source, copy only what the project owns, and verify its dependencies and license. Breadth is not a reason to install an overlapping bundle. Source: X bookmark 2077326870261928047, reviewed 2026-07-16
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. |
| Narrative career/company/project timeline | Lifeline | Use for one authored temporal story with sparse milestones and media. Keep operational histories listable; pin and inspect the delivered registry payload before adoption. |
| 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. |
| AI-native pattern vocabulary | Beautiful UI + AI-Native Design Patterns | The 2026-09-07 catalog has 21 live patterns and an explicit MIT license, resolving the August rights gap. Retain notices; map demo behavior to real runtime events and prove semantics, accessibility, and host fit. |
| Agent clarification and resumable intake | shadcn Questionnaire | Native-form multi-step single/multiple/freeform/optional/conditional input with controlled state, validation, keyboard shortcuts, SSR, Base UI/Radix/React Aria variants, and a headless package. Use for asking and resuming; never relabel an answer or recommended default as authority-bearing approval. |
| Editable design-file automation | OpenPencil | Candidate for .fig/.pen inspection, lint, token extraction, CLI/MCP automation, and editable export. It is pre-production; scope file access and prove format fidelity, collaboration/privacy, accessibility, and export round trips on owned fixtures. |
| Dense editable data table | BeUI motion table | Candidate for 10k-row virtualization, selection, resize/reorder, inline editing, insert/delete, skeletons, and infinite scroll. Adopt only after keyboard/screen-reader, focus restoration, async race, large-data, and bundle/performance tests. |
| Agent-ready shadcn catalog | ReUI | Discovery source for free primitives/components, MCP/skills, icons, and paid blocks. Resolve the exact item's free/Pro license and registry payload; copy one needed component, retokenize, and test it locally. |
| 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. |
| Searchable Framer/React effect registry | Originkit | Use for one exact kinetic-text, cursor, gallery, canvas/WebGL, border, or background treatment. Inspect the authenticated delivered source, terms, dependencies, reduced motion, semantics, lifecycle, and frame cost; the MIT CLI does not license every registry item. |
| 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. |
Design-Engineer Source Ladder
The saved five-site list is useful when routed by job rather than presented as
five interchangeable component libraries. The post's eactbits.dev is a typo;
the live source is reactbits.dev.
| Source | Actual job | Boundary |
|---|---|---|
| Interface Craft | Paid applied-interface learning library: articles, walkthroughs, interactive videos, skills, references, and tools. | Learn decisions and micro-polish; a subscription does not imply that every demonstrated product asset or component is reusable. |
| Motion Primitives | Free editable React/Tailwind/Motion primitives. | Copy one needed primitive, retokenize, and verify reduced motion, lifecycle, semantics, and responsive behavior. |
| React Bits | Current 165-plus expressive components across multiple source flavors with shadcn/jsrepo delivery. | Inspect style, dependency, and license component by component; do not bulk-mix perpetual effects. |
| Motion.dev | MIT/open-source motion engine plus official docs and agent-readable API; separate paid AI Kit/UI products. | Choose the engine for behavior; paid examples and components are not implied by the open library license. |
| Devouring Details | Paid interactive reference manual with 23 chapters and 23 downloadable React components. | Use as a recurring craft reference and inspect exact component terms; it is not the default free component source. |
This ladder preserves the strongest signal from the roundup: study craft, pick
an editable primitive or engine, inspect expressive examples, and return to a
reference manual for judgment. Popularity does not become installation
authority. Source: X 2085821925775843431; complete current site replay,
2026-08-12
Specialist source matrix
Specialist libraries stay useful when routed by the hard part of the job rather than by catalog size. The current commit-pinned cohort adds these bounded routes: Source: repository evidence captured 2026-08-12
| Hard part | Current source | Admission proof |
|---|---|---|
| Embeddable email editor and email-safe React output | resend/react-email@553e7023, MIT, 41 test files |
Brand theming, extension sandbox, email-client fixtures, HTML/text parity, accessibility, sanitization, bundle size, and export fidelity. |
| Framework-agnostic generated skeletons | 0xGF/boneyard@c085b32f, MIT, one skill and no detected tests |
Layout match under async/conditional content, hydration, motion preference, semantics/status, and cumulative layout shift. |
| Interactive DOM with WebGL/canvas effects | DavidHDev/canvas-ui@cd17ebd6, MIT plus Commons Clause, no detected tests |
Study the live semantics and effect grammar, but do not turn its HTML-in-Canvas execution layer into a baseline dependency. The license permits use in an application while prohibiting sale, sublicensing, or redistribution of the components themselves, including ported versions. Preserve real DOM, use a portable fallback, and prove browser coverage, focus/input, reduced motion, lifecycle, GPU/battery, and local source ownership. |
| Dashboard charts | legions-developer/evilcharts@6f26c885, MIT, 24 skill files |
Data scale, keyboard/table alternative, labels/tooltips, color/contrast, resize, SSR, bundle and frame cost. |
| Drawing toolbar | benjitaylor/drawesome@8fb08e93, MIT, zero detected tests |
Pointer/keyboard/touch, undo/redo, selection, export fidelity, controlled state, accessibility, and dependency/API stability. |
| Complete-tree localization | generaltranslation/gt@240a65e9, MIT, 1,129 test files |
Plurals, date/number/currency, interpolation, RTL, CJK, component reorder, truncation, offline/failure, privacy, and deterministic source mapping. |
| JSX/HTML to SVG/image/PDF without a browser | kane50613/takumi@28edb816, Apache-2.0, 897 test files |
Exact fonts/subsets, scripts, shaping, line breaking, SVG/PDF fidelity, cache/concurrency, accessibility of source content, and target-runtime cost. |
| Computer-use runtime | trycua/cua@9bd4221e, MIT, 380 test files and 97 workflows |
Authority, credentials, observation/action logs, cross-platform fidelity, latency/cost, recovery, and representative tasks. |
| On-demand multi-icon access | unplugin/unplugin-icons@0bbf1cfd, MIT |
Pin collections, tree-shake verified output, accessible names, consistent visual grammar, bundle budget, and maintenance. |
| App/agent workspace | lemma-work/lemma-platform@8b52627f, AGPL-3.0, 758 test files |
Deployment/license obligations, identity, schedules, agent authority, data, audit, recovery, and export before product adoption. |
| React agent evaluation | millionco/reactbench@11ff042e, no detected license, 1,084 test files |
Use as evaluator evidence only after resolving rights, task leakage, graders, versions, variance, and target-app transfer. |
| Project management product reference | makeplane/plane@1c8a60f8, AGPL-3.0, 76 test files |
Use by exact product job; verify deployment, auth, data migration/export, upgrades, operations, accessibility, and license obligations. |
| Visual Flexbox/Grid composition and code export | prazzon/Flexbox-Labs@39416e13, MIT, zero detected tests/workflows |
Use as a local learning/prototyping surface for live container/item controls, templates, undo/redo, save/load, and HTML/CSS/Tailwind export. Verify generated semantics, responsive behavior, keyboard/screen-reader operation, export round-trip, Tailwind conversion coverage, persisted-state migration, and production dependency health before reusing code. |
| Follow-notification microinteraction | ui.hanu.sh saved component; exact delivered source 17d912c2 |
Retain as a strong behavior reference, not a default package. The 16,842-byte React source has speed/pause/sound controls, hidden-tab suspension, timer/frame cleanup, and AudioContext teardown; the live 1440×1000 page had zero axe A/AA violations with two unresolved transient contrast nodes. Product use still needs a real follow event, one polite announcement owner, dedupe/queue and interruption policy, offscreen suspension, touch/mobile proof, and host reduced-motion behavior. The public card says “ready to copy,” but no explicit license/terms surface was found, so preserve the pattern and hash without mirroring source. |
| Agent-conversation components | AIcss registry, 14 current components, nine free | Discover by exact job through the registry or llms.txt, then fetch one exact payload. Free entries permit personal/commercial app use; paid entries require the token-bearing license; neither route permits redistribution as-is in a competing catalog. Normalize the registry's current localhost:3000 URL defect. Validate runtime events, semantics, keyboard/touch, reduced motion, theme, dependencies, lifecycle, frame cost, and host visual fit. |
| Persistent React agent-status animation | Jakubantalik/thinking-orbs@e04f3e87, MIT, npm 0.3.1 |
First runtime candidate when real events can map to one of nine indeterminate verbs. Prefer its static reduced-motion frame and hidden/offscreen suspension over an always-running copied gallery. Exact typecheck/build and production audit pass; no executable upstream test suite exists, so verify state mapping, announcement ownership, theme, pause/resume, cleanup, terminal removal, browser support, and battery/frame cost locally. |
| Active perimeter signal for one bounded agent control | border-beam@1.3.0 from Jakubantalik/Libraries@999866f3, MIT |
Use one restrained, static-color beam only when an owned control is open, processing, or away; do not spread glow across a section or treat it as a permanent decoration. Rotating variants require a host reduced-motion rule. Verify real state mapping, theme ownership, offscreen suspension, cleanup, focus geometry, mobile containment, and paint cost locally. Jarhead is the first proven integration: one thinking-orbs actor travels while the fixed beam-wrapped dock remains behind. |
| Compact design-tool inspector controls | Libraries.dev Gooey, Jakubantalik/Libraries.dev@999866f3, MIT |
Reuse its four-part grammar—wrapping radio tabs, filled native ranges, independent toggle pills, and semantic swatches—inside a locally tokenized inspector. Preserve the native input or button as the interaction owner, map every visible control to real state, and omit the public demo's locked Studio teaser rather than presenting inert settings as tools. The Personal Website is the first proven host: all four primitives mutate persisted hero or canvas state across both themes. |
| Varied live inspector controls | DialKit, joshpuckett/dialkit@d408597c, npm 2.0.0, MIT |
Prefer the actual controlled slider, Off/On segments, select, text, color/image picker, XY pad, and Bézier exports when those jobs map to real host values. Keep the application's existing state/persistence owner; the full root, transition-mode editor, presets, and timeline have additional store/lifecycle contracts. Preserve the source's compact surfaces, type, and rounding while checking host contrast, scoped theme/portals, self-hosted fonts, reduced motion, and touch/keyboard behavior. Upstream pure helper tests passed; this source review does not certify a host integration. |
Canvas UI: separate the presentation and motion laws from the execution layer
Canvas UI is strongest as a reference for two
bounded behaviors and one documentation pattern. Its docs keep each component
inside a centered max-w-3xl column, lead with title and one sentence, place
the live specimen before installation/code/API detail, and leave enough quiet
space for the behavior to be understood. That hierarchy can transfer into an
owned component workbench without importing the site's dark shell or long docs
sidebar. Source: DavidHDev/canvas-ui@cd17ebd6,
src/components/docs/component-doc.tsx; browser replay at 1440×1000,
2026-09-01
The reusable law in ASCII Sweep is a directional band that hides one
state handoff inside content-attached characters, then dissolves completely.
It belongs on an intentional state change, not as ambient texture. Keyboard
changes should remain immediate and reduced motion should jump directly to the
new state. The reusable law in Displacement is velocity gating: slow
pointer motion leaves content alone, fast motion perturbs only a local cell
neighborhood, and the field relaxes to zero afterward. It belongs on one active
media surface, not every card in a grid. Source: src/lib/AsciiSweep/AsciiSweepVanilla.ts SHA-256
6ae63cfa25764719c45047f2d706d9c4df48f8a96f9cd997f9e109c81521c112;
src/lib/Displacement/DisplacementVanilla.ts SHA-256
48a6c60d6d97e0f93fd708b3f4d8c6bd33bc33fafc027fbcbd47261b14a07037
The upstream runtime captures live DOM into Canvas/WebGL and probes the
experimental drawElementImage / layoutsubtree path, with a substantial
manual snapshot fallback for ASCII Sweep. That architecture is not a portable
default. For an app-owned adaptation, preserve semantic DOM as the permanent
surface, mount an aria-hidden effect layer only during the bounded event,
avoid continuous frames while idle, and let the host own focus, pointer,
reduced-motion, visibility, and teardown. No upstream source bytes are needed
to retain these laws. The current license is MIT plus Commons Clause: use in an
application is allowed, but selling, sublicensing, or redistributing the
components themselves—including ported versions—is prohibited. Source: DavidHDev/canvas-ui@cd17ebd6, LICENSE.md SHA-256
2a9a221a47f581d7984ca3a568e38fb17d5b6e43164db3f3482b4767c8e8e5b3
Clicky, Slither Charts, avatar libraries, event calendars, large component collections, cutting-mat/vector utilities, and individual designer sources all remain retained as references. A missing license, test, or current artifact caps code reuse; it does not erase the interaction or visual signal.
Lifeline and registry/source parity
Lifeline is the current specialist source for a narrative temporal rail: a
career, company, project history, or bounded journey whose sparse milestones,
people, links, and media benefit from chronological spatial context. The saved
61-second 1080p demo shows a continuous dark rail carrying product milestones,
large date/quarter wayfinding, event copy, engagement counts, and floating
media cards. The repository adds a responsive split—horizontal wheel/drag
scrubbing on desktop and a vertical ordered list on mobile—plus page/embed
modes, boundary release, focus-gated arrow keys, reduced-motion settling,
viewport-armed intros, and source-owned shadcn registry items. Source: X
2085118669609472397; local video artifact review; complete source review of
evilrabbit/lifeline@8ddbb3d, 2026-08-12
Recommend the interaction vocabulary, not blind installation. At the pinned
revision the MIT repository has no tests, CI workflows, tags, or releases. The
lockfile install, TypeScript check, and Next production build passed; the
repository's lint command failed with 35 errors, including render-time ref
access, effect state updates, and a callback declaration-order error. Several
pointer-only media/effect affordances also need native-button semantics, focus
management, and keyboard parity before use. LIFELINE_CURRENT_YEAR is a
hard-coded constant, so a reusable installation must inject or derive the
temporal boundary and validate dates/IDs instead of aging silently.
Most importantly, the live evilrabbit.com/r/lifeline.json payload matched the
repository's checked-in generated JSON but not a registry rebuilt from the same
source revision: four files differed, covering hover-image pixel snapping,
timeline utilities, wheel/gesture behavior, and data/age handling. For any
source-copy registry, capture and hash both surfaces:
live install payload -> canonicalized file hashes -> pinned source rebuild -> semantic diff
If they differ, the live payload is the code the installer delivers and the source branch is only intent until the registry is republished. Hold adoption or vendor the exact reviewed source deliberately; never let README, demo, and install URL describe three silently different revisions.
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 premium shadcn/ui block, component, template, page-builder, IDE, CLI, and MCP source with a smaller constrained free-code repository. | Use when breadth matters. Inspect the exact item's plan and license: the captured free repository uses MIT plus a Commons Clause redistribution restriction even though its package metadata says MIT. |
| 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. |
| Beautiful UI | 21 AI-native reference patterns spanning run state, tools/tasks, intent, recommendations, approvals, evidence, tables, tuning, and result actions. | The current MIT license, copyright Shane Levine 2026, resolves the earlier license uncertainty. Preserve the exact delivered revision and notice, replace demo timers with runtime receipts, and independently prove accessibility, reduced motion, responsive state, and authority semantics. |
| OpenPencil | MIT design editor plus CLI/MCP surfaces for .fig/.pen, linting, token analysis, querying, and editable export. |
Current source 51ab2157 has 626 detected tests and nine workflows, but declares active development/not production-ready. Use owned design fixtures and scoped file access; verify import/export fidelity rather than replacing the incumbent design tool by reputation. |
| BeUI motion table | Dense virtualized editable data-grid reference. | Test 10k-row behavior, keyboard and assistive technology, focus after reorder/edit/delete, async cancellation, mobile fallback, and measured bundle/runtime cost before adoption. |
| ReUI | Large shadcn-oriented component, primitive, icon, MCP, and skill catalog with free and Pro surfaces. | Keep as a discovery source. Resolve each registry item, plan, license, dependencies, Base/Radix variant, and source ownership; do not treat catalog size as quality proof. |
| 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. |
| Originkit | Hosted beta registry with 160 live components, 48 sections, Framer-first previews, React/Next source delivery, CLI, and MCP retrieval. | Treat as an exact-effect source, not a bulk dependency. Freeze the delivered item and terms; verify source rights, dependency graph, reduced motion, semantics, cleanup, offscreen behavior, performance, and design-system fit. |
| 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. |
| Componentry | Visually expressive shadcn-compatible components and blocks with a remote registry. | Inspect and install one exact registry item at a time. At reviewed commit 48efb64, the build passed and many components handled reduced motion, but the repo had no tests or releases, strict lint warnings, 39 production advisories, and a registry served from a different domain (componentry.fun). Inspect JSON, transitive dependencies, license, accessibility, motion, and performance before adoption; never bulk-add. |
| Iconsax | Large SVG icon reference across multiple styles. | Treat as a license-aware reference, not an open-source dependency: the official page and docs disagree on live counts, and the official free license is proprietary, single-user, attribution-sensitive, non-transferable, and forbids loose redistribution. Do not bulk-vendor or relabel authorship. |
| 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. |
Ten-source shadcn roundup review
The July 4 roundup 2073434416949678314 is a useful source shelf, but “free
shadcn blocks” is not a reliable selection class. Forced enrichment recovered
all ten original links, and the saved image is only a title card. A current
primary-source freeze distinguishes the jobs and terms:
| Job | Start with | Boundary |
|---|---|---|
| Broad app/product blocks | Blocks.so | MIT source; still inspect the exact block, dependencies, and behavior. |
| Marketing pages and sections | Tailark | MIT source with separate Base UI and Radix registry routes. |
| Retro/pixel art direction | 8bitcn/ui | MIT and intentionally stylized; never a generic SaaS default. |
| Dense functional widgets | Kibo UI | MIT source for code, dropzone, QR, Gantt, Kanban, table, tree, and similar app components. |
| React Aria behavior | Intent UI | MIT React Aria/Tailwind source; prefer when behavior ownership matters more than shadcn styling. |
| Inspectable animated components | SmoothUI | MIT Motion-based source with the strongest visible test, CI, and reduced-motion surface in this captured set; MCP/CLI still does not replace local review. |
| Broad effect/source discovery | UI-Layouts | MIT repository plus premium live blocks; use as a shelf, not one bulk dependency. |
| Maximum catalog breadth | Shadcn Blocks | Live site is explicitly premium. The smaller “free” source uses MIT plus Commons Clause, so do not describe the whole catalog or free subset as plain MIT/open source. |
| Themes, templates, Figma, AI, MCP | Shadcn Studio | Frozen source is MIT; the live mixed free/premium catalog has moved beyond that older snapshot, so verify each live item separately. |
| Base/Radix-aware app and dashboard layouts | Shadcn Space | MIT source with components, blocks, dashboards, Motion variants, CLI, Figma, builder, and MCP paths. |
Keep all ten sources. For implementation, select one exact item, read its
registry payload and source, check transitive dependencies and current terms,
copy only what the project owns, retokenize it, and prove semantics,
keyboard/focus behavior, contrast, responsive states, reduced motion,
performance, and visual fit. Popularity and catalog size affect discovery
priority; they do not waive proof. Source: X 2073434416949678314;
.brain/artifacts/x/2073434416949678314/shadcn-source-set/capture-manifest.md,
2026-08-11
Source-first exploration, not default chrome
Choose a signature interaction before choosing its supporting components: name
the real content, action, visible consequence, and state owner. A portfolio can
borrow a design tool's manipulation and continuity without inheriting its
sidebar, dock, window frame, or uniform card layout. Conversely, a genuine app
may need exactly that chrome. Project palette, identity, media scale, and shell
decisions remain in the local design contract, not global taste rules. Compare
variants against the same actual content, state, and viewport. Source: Personal
Website exploration and current DESIGN.md, 2026-09-07;
design-engineering-polish
For requests centered on one dominant interactive visual, use the signature-first procedure. Directions must differ in silhouette, material behavior, or action/consequence, not merely renamed layouts or reordered photographs. Prove rest, contact, release, and settling with the same real content, including mobile and static states; choose the rendering medium only after the visual law. This is a bounded exploration branch, not a universal requirement for large visuals or 3D. Source: Personal Website user correction, 2026-09-07
When a request names whole libraries, enumerate their declared public catalogs
before shortlisting. Reconcile navigation, sitemap, llms.txt, registry items,
and framework variants; distinguish catalog coverage from source and rendered
verification. The dated complete inventory
and review receipt
retain all names and URLs without making the skill entrypoint an inventory dump.
| Source | Public inventory on 2026-09-07 | What changes selection |
|---|---|---|
| Beautiful UI | 21 live patterns | Current MIT license resolves the prior rights gap; mock demonstrations still need real event owners. |
| BeUI | 82 families; 115 installable variants | Families are not variants. A selected registry payload can contain preview-only shader dependencies absent from its actual component import graph. |
| Rare UI | 18 component/source entries | Exact public source is inspectable under MIT; adopted timing, geometry, and lifecycle need independent host proof. |
| Transitions.dev | 43 preview pages: 32 free, 11 Pro | image-open-tilt, drag-drop-with-physics, and card-stack-hover are paid-source previews. Application-use terms differ from the MIT tooling license; no premium source was fetched. |
| shadcn/ui | 65 families; 192 Base/Radix/React Aria documentation URLs | Current sitemap coverage exceeds the legacy llms.txt; a family count is not a block/style/demo count. |
Keep source claims, inspected implementation, browser observations, and inferred
transfer separate. Oscar Dumlao's water playground
is a useful contrast: a compact time ruler changes the whole scene and a dragged
wake decays after release. The inspected renderer uses direct WebGL2/GLSL—not
verified WebGPU or Three.js—and no reusable-source license was confirmed. Its
42.1 MB measured session, content-dependent text contrast, non-static reduced
motion, and interaction-started ambience are not patterns to inherit. The
transferable principle is coherent consequence from one shared scene; source
visibility alone does not authorize copying. The original X video was not
played; this is live-page/source evidence, not a frame-by-frame claim. Source: reviews/source-signals/source-first-component-exploration-20260907.review.json
Agent Use Protocol
- Load the appropriate design skill first: design-engineering-polish, Frontend and Design Skills, or Cloud, Data, and Service 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.
- Before copying, inspect the exact delivered source, import closure, and applicable license; distinguish component dependencies from preview scaffolding. 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 the exact registry payload and dependencies in
package.json. Add only what the copied component actually needs; a registry's branding or MCP label is not dependency or authority proof. - Run motion review. Frequent UI should stay fast and quiet; rare marketing moments may be expressive.
- A visible copy button is not license proof. Record repository, revision, license, dependencies, and provenance before source enters a distributable app; otherwise borrow the interaction principle and implement it independently.
- For hosted registries such as Originkit, record the exact delivered payload and terms separately from the CLI package, website preview, and inaccessible or stale repository metadata.
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. |
| Agent UI and run-state presentation | AIcss, thinking-orbs + Agent Product Surface |
AIcss is the broader job-shaped registry; thinking-orbs is the preferred continuous React status candidate. Both remain subordinate to durable run events, visible text, and authority receipts. |
| Motion/WebGL libraries | Motion Library Ranking, Motion.dev, Web3D Library Ranking, Frontend and Design Skills, Frontend and Design Skills, Cloud, Data, and Service 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-08-05 | Recorded EvilCharts' announced ECharts route: eight chart types, 108 examples, 18 custom blocks, Next.js/React, and a free/open-source claim. The post and media did not establish a repository, version, or license, so the existing EvilCharts shelf stays unchanged pending primary-source verification. Source: X/@legionsdev
2080986434333270096 -
2026-09-07 | Enumerated five public component catalogs with separate family, variant, block, and paid-preview counts; resolved Beautiful UI's former license gap through its current MIT page; and codified signature-first, exact-source, same-content exploration without promoting the Personal Website's current spatial taste into a universal shell rule. Retained Oscar Dumlao's live water playground as a behavior reference, corrected the renderer to inspected WebGL2/GLSL, and held source reuse where rights were unconfirmed. Source:
reviews/source-signals/source-first-component-exploration-20260907.review.json -
2026-09-05 | Added the actual DialKit control family alongside the smaller Gooey grammar. Pinned source and published package integrity, distinguished controlled exports from store-backed wrappers, and retained existing host state plus restrained authored-page identity as the adoption boundary. Source:
reviews/source-signals/personal-website-dialkit-20260905.review.json -
2026-09-04 | Adapted the Libraries.dev Gooey playground's complete public control grammar into the Personal Website's Inspect panel at pinned MIT commit
999866f3: wrapping radio tabs, filled native ranges, toggle pills, and signal-color swatches. The host exposes only real state, including previously hidden hero depth, texture, caption, and signal controls; the paid teaser and inert locked rows remain excluded. Serial focused Playwright, TypeScript, lint, build, and light/dark Agent Browser proof close the route. Source:reviews/source-signals/personal-website-gooey-controls-20260904.review.json -
2026-09-04 | Integrated the published
thinking-orbs@0.3.1andborder-beam@1.3.0packages into the Personal Website's Jarhead helper after an exact MIT, peer-dependency, payload, lifecycle, and browser audit. The adopted composition keeps one semantic orb mapped to seven real agent phases and limits a static-color beam to the active dock; focused regression coverage proves a single canvas, measurable travel/return, reduced motion, theme, focus, and mobile containment. Source:Jakubantalik/Libraries@999866f3;reviews/source-signals/personal-website-jarhead-libraries-20260904.review.json -
2026-08-12 | Expanded the saved AIcss orb signal into the complete 14-component machine-readable agent-UI registry, froze its free/paid/redistribution boundaries, and browser-audited the live orb gallery. Reduced motion correctly disables all animation, but the gallery ran 375 CSS animations, kept 350 running after scroll, and exposed 38 contrast-affected nodes; use it as a one-component-at-a-time registry, never as a page architecture. A related repository traversal found the canonical
thinking-orbs@0.3.1package, which now has nine states and stronger lifecycle behavior than the stale six-state secondary skill. [Sources: X2085012911798292828; AIcss registry/pricing;Jakubantalik/thinking-orbs@e04f3e87; structured exploration receipts] -
2026-08-12 | Added shadcn Questionnaire as the tested agent-clarification and resumable-intake primitive while keeping ask, recommendation acceptance, and digest-bound approval as separate authority states. Source: X/@shadcn
2085083695401078912;shadcn-ui/ui@a85299a9source and tests -
2026-08-12 | Recovered all five “Websites for Design Engineers,” corrected
eactbits.devto React Bits, and routed Interface Craft, Motion Primitives, React Bits, Motion.dev, and Devouring Details by their distinct learning, primitive, effect, engine, and reference-manual jobs. Source: X2085821925775843431; complete live-site review -
2026-08-12 | Resolved the previously unnamed visual layout tool from the complete video to Flexbox Labs and pinned its MIT repository. It is retained for visual Flexbox/Grid prototyping and code export, with zero detected tests/CI and explicit semantics, accessibility, conversion, persistence, and round-trip gates. Deepened the ui.hanu follow-notification source from a visual card into an exact behavior receipt: 16,842-byte source at
17d912c2, speed/pause/sound controls, hidden-tab and teardown handling, motion-reduce transitions, no live region or offscreen suspension, zero live axe violations with two unresolved contrast nodes, and no explicit source license found. Source: X2084256275047805384,2083510045762023565;prazzon/Flexbox-Labs@39416e13; ui.hanu live/source audit -
2026-08-12 | Resolved the high-engagement “250+ free animations” bookmark to Originkit, recovered its complete video, enumerated 160 current components plus 48 sections, inspected the MIT CLI tarball and representative canvas/GSAP preview modules, and admitted it as a guarded exact-effect registry. The current route distinguishes the CLI license from server-delivered component rights and requires payload, dependency, reduced-motion, accessibility, lifecycle, performance, and target-design proof. Source: X
2081620717775237573; Originkit live registry; npmoriginkit@0.2.23 -
2026-08-12 | Added OpenPencil, BeUI's editable virtual table, and ReUI to the consolidated source shelf without multiplying pages. OpenPencil is a strong MIT, tested, editable design-file automation candidate but explicitly pre-production; BeUI and ReUI remain exact-item candidates gated by accessibility, performance, registry payload, plan/license, and owned-source proof. Source: X
2079209760545800328,2072424039935508629,2075176739957829732; OpenPencil commit51ab2157 -
2026-08-11 | Added Beautiful UI as a retained AI-native composition and state-vocabulary source without creating a new page or copying code. The exact replay found 19 live patterns versus the saved post's 17, polished source dialogs and responsive/reduced-motion handling, but no linked repository or license; adoption now requires independent behavior, authority, accessibility, and event-state proof. Source: X
2082479500944904432; exact live-site/source/media replay -
2026-08-11 | Replayed all ten links in X source
2073434416949678314, inspected its title-card image, froze ten primary repositories, and replaced the blanket “free list” framing with job, source, plan, license, dependency, accessibility, motion, and proof routing. All ten sources remain visible without ten new pages or bulk installation. Source:.brain/artifacts/x/2073434416949678314/shadcn-source-set/capture-manifest.md -
2026-08-10 | Added license-aware Iconsax reference routing and a one-component-at-a-time Componentry evaluation route. Corrected the bookmark's “open source” generalization for Iconsax and recorded Componentry's passing build and improved reduced-motion coverage alongside its missing tests/releases, lint warnings, vulnerable dependency graph, and cross-domain registry boundary. Source: X/@csaba_kissi; Source: Iconsax and Componentry primary-source review, 2026-08-10
-
2026-07-16 | Added an explicit no-bulk-install rule for large UI/skill/MCP collections: use them for discovery, then adopt the smallest owned component after vocabulary, dependency, license, token, accessibility, and browser review. Source: X bookmark review, 2026-07-16
-
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; GitHubcloudflare/kumo; GitHubibelick/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