UI Library Ranking
Pick UI sources by job: behavior primitives first, app-owned components next, then visual blocks, chart systems, and small specialist libraries.
This page is the ranking layer above Component Library Sources and UI Primitives Shortlist. Use it when an agent asks "which UI library should I reach for?" before copying code or adding a dependency.
Routing Summary
Load this page before choosing among UI/component libraries. It ranks behavior primitives, shadcn/block registries, animated/polish sources, chart libraries, and small specialist primitives, then routes detailed lookup to Component Library Sources, Shadcn Registry Directory (Top Blocks), and UI Primitives Shortlist.
Default Ranking
| Rank | Library/source family | Use first when | Notes |
|---|---|---|---|
| 1 | Radix UI, Base UI, Shadcn UI Ecosystem | The hard part is accessibility, keyboard behavior, focus, popovers, dialogs, menus, forms, or app-owned component code. | This is still the default for product UI because ownership, tokens, and behavior matter more than novelty. |
| 2 | Astryx Design System, Cloudflare Kumo | The app needs a broader design-system substrate or a source-owned packaged component model. | Use as reference or adoption candidate after checking framework, styling, and ownership fit. |
| 3 | Blocks.so, Shadcn Registry Directory (Top Blocks), Origin UI, Tailwind Plus Components | The screen is a conventional app, marketing, dashboard, settings, pricing, auth, or docs layout. | Inspect block registries before building common blocks from scratch. Retokenize and remove demo copy. |
| 4 | Kokonut UI | The screen needs polished animated Tailwind/shadcn/Motion components for React or Next.js. | Official site lists 100+ components built with Tailwind CSS, shadcn/ui, Motion, React, and Next.js. Install shape is npx shadcn@latest add @kokonutui/<name>. |
| 5 | Motion Primitives, React Bits, Fancy Components, Magic UI, SmoothUI, Skiper UI, Cult UI, Chanh Dai Components | The value is expressive interaction, microanimation, animated background, or distinctive component craft. | Pick one dominant visual source per viewport. Verify reduced motion and bundle cost. |
| 6 | Bklit UI, Evil Charts, Dashboard Blocks / Efferd | The UI is chart-heavy, dashboard-heavy, or needs data visualization blocks. | Bklit is a shadcn/ui-based chart and data visualization component library with chart components, blocks, and Studio. |
| 7 | Sonner, UI Primitives Shortlist | The job is a small primitive: toast feedback, animated numbers, OTP input, realtime chart line, knobs, command menu, virtualization, or drag/drop. | Use Sonner directly for toasts; otherwise prefer the small package over importing a whole design system for one behavior. |
Registry Ranking
| Source | Best for | Use note |
|---|---|---|
| Blocks.so | Open-source copy-paste React components built with shadcn/ui and Tailwind CSS. | Good first stop for common app sections and accessible production-ready blocks. |
| Tailark | Modern marketing websites, pages, illustrations, and shadcn marketing blocks. | Use for launch/product/marketing sections before creating a custom landing-page system. |
| Shadcn Blocks | Very large premium shadcn block/component/template catalog, page builder, IDE extension, CLI, and MCP workflows. | Use when breadth matters. Its smaller free repository is MIT plus Commons Clause, not plain MIT despite package metadata; verify the exact item's terms. |
| Shadcn Studio | Radix/Base-supported shadcn components, blocks, templates, themes, Figma kit, AI tools, and MCP server. | Use for broader kit/theme/template workflows, especially when Figma or AI-assisted install paths matter. |
| Shadcn Space | Blocks, templates, components, dashboard layouts, Base UI/Radix support, Motion variants, CLI, builder, and MCP. | Good for Base/Radix-aware app and dashboard layouts. |
| Kibo UI | Accessible composable shadcn registry with components, blocks, and a large pattern library. | Good when the needed component is more functional than decorative: code block, dropzone, QR code, Gantt, Kanban, table, tree, etc. |
| Intent UI | Accessible React components built with React Aria Components and Tailwind CSS, plus blocks/templates/starter kits. | Use when React Aria behavior and copy-owned components matter more than shadcn registry fashion. |
| SmoothUI | Animated React components and blocks for shadcn/ui, with Motion/GSAP polish and machine-readable/API surfaces. | Use for AI-discoverable animated components and polished hero/interaction blocks. |
| UI-Layouts | Broad MIT repository of components/effects plus live premium blocks and MCP positioning. | Use as a general inspiration/source shelf when the exact component family is not obvious; inspect one exact free or paid item. |
| 8bitcn/ui | Retro 8-bit copy-paste components, blocks, and themes. | Use for game, pixel, retro, or intentionally stylized surfaces; do not use as default SaaS UI. |
Source Cards
Selection Rules
- If the component has difficult behavior, start with Radix UI, Base UI, or Shadcn UI Ecosystem before visual sources.
- If the component is a normal app block, inspect registry/block sources before custom layout.
- If the component is mostly polish, choose one animated/effects source and retokenize it.
- If the component is data visualization, check Bklit, Evil Charts, and dashboard block references before hand-rolling.
- If the need is toast or notification feedback, use Sonner and wrap it locally.
- If the need is another one-off primitive, use UI Primitives Shortlist and wrap it locally.
- “Free,” “open source,” “copy-paste,” and “premium” are separate facts. Verify the exact source file, registry payload, license or plan, and redistribution terms before adoption; never infer one from a roundup title or
package.jsonalone.
Audit Coverage
| Named source | Coverage |
|---|---|
| Astryx, Kumo | Rank 2 and first-class pages: Astryx Design System, Cloudflare Kumo. |
| Skiper, Cult, Chanh Dai, Evil Charts | Rank 5/6 and first-class pages: Skiper UI, Cult UI, Chanh Dai Components, Evil Charts. |
| Kokonut, Bklit, Magic UI | First-class pages added in the 2026-07-07 audit: Kokonut UI, Bklit UI, Magic UI. |
| Sonner | First-class page: Sonner for toast and notification feedback. |
| NumberFlow, input-otp, Liveline, Leva, cmdk, Virtuoso, dnd kit | Covered together in UI Primitives Shortlist so small primitives are retrievable without seven duplicate tool pages. |
| Motion.dev / Framer Motion | Covered by Motion.dev and Motion Library Ranking. |
| Three.js / WebGL / R3F | Covered by Web3D Library Ranking, Frontend and Design Skills, and Cloud, Data, and Service Skills. |
Version Notes
Kokonut UI and Bklit UI were checked from official docs/sites on 2026-07-06. The ten-source registry set was force-replayed and frozen at primary repository revisions on 2026-08-11. These are source/catalog routes rather than one runtime dependency. When adopting a component, verify the exact registry command, payload, copied source, license or commercial plan, transitive dependencies, accessibility, reduced motion, and responsive behavior.
Timeline
-
2026-08-11 | Re-ranked the complete ten-source shadcn roundup by actual job and terms. Kept every source, promoted SmoothUI for inspectable motion and Intent UI for React Aria behavior, and corrected the blanket free/open-source claim for mixed premium catalogs and Shadcnblocks' Commons Clause free subset. Source: X
2073434416949678314;.brain/artifacts/x/2073434416949678314/shadcn-source-set/capture-manifest.md -
2026-07-07 | Promoted Sonner from the combined primitive shortlist into the ranked UI-library route as the default React toast/notification source. Source: User request, 2026-07-07; https://sonner.emilkowal.ski/; https://github.com/emilkowalski/sonner
-
2026-07-07 | Linked Base UI as a first-class Rank 1 primitive source instead of leaving "Base UI" as unlinked text. Source: User request, 2026-07-07; https://base-ui.com/; https://github.com/mui/base-ui
-
2026-07-07 | Added an explicit audit row for Emil Kowalski's eight focused UI primitives and routed them to UI Primitives Shortlist as one combined page. Source: User request, 2026-07-07; https://x.com/emilkowalski/status/2074169272717152716
-
2026-07-07 | Promoted Kokonut UI, Bklit UI, Magic UI, and Motion.dev into first-class routes and added audit coverage rows for Astryx, Kumo, Skiper, Kokonut, Bklit, Motion.dev, Framer Motion, Three.js, WebGL, and R3F. Source: User request, 2026-07-07
-
2026-07-06 | Added the consolidated UI library ranking route and promoted Kokonut UI and Bklit UI into the component-source decision stack. Source: User request, 2026-07-06
-
2026-07-06 | Added Kevin's extra shadcn/block registry list: Blocks.so, Tailark, 8bitcn, Kibo UI, Intent UI, SmoothUI, UI-Layouts, Shadcn Blocks, Shadcn Studio, and Shadcn Space. Source: User request, 2026-07-06