6 min read
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 shadcn block/component/template catalog, page builder, IDE extension, CLI, and MCP workflows. | Use when breadth matters; exact public counters are marketing counters and should be rechecked before citing. |
| 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 component/effect/block source with MCP positioning and premium blocks. | Use as a general inspiration/source shelf when the exact component family is not obvious. |
| 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.
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 Frontend and Design Skills. |
Version Notes
Kokonut UI, Bklit UI, and the 2026-07-06 registry list were checked from official docs/sites on 2026-07-06. They are source/catalog routes rather than single runtime dependencies in this wiki pass. When adopting a component, verify the exact registry command, copied source, license, and dependency list at implementation time.
Timeline
- 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