Design Atlas

← Atlas

Components ​

Component libraries, registries and design systems for building UI — from single copy-paste snippets to full production design systems.

Start here ​

  • shadcn/ui — the de-facto foundation other libraries in this atlas build on top of; copy-the-code model, agent-ready.
  • The Component Gallery — compare how dozens of mature design systems name and structure the same component before designing your own.
  • Astryx — a comprehensive production system with strong accessibility hooks and a sophisticated table component.
  • React Bits — hundreds of animated components with an llms.txt index for agents.
  • Carbon Design System — IBM's mature Apache-2.0 system, with about 50 components, pattern pages for whole flows and an llms.txt that maps every component to its package.

All sources ​

Showing 50 of 236 sites

Ship: reuse with the notice or credit the licence asks forConditional: read the terms before you reuse anythingLook only: no licence stated, so take ideas and nothing else

  • 21st.devCommunity registry of React and Tailwind components with many variants per pattern, a CLI and an MCP server.Verdict Very usefulLook only licence, not statedAgent channels mcp, cli, apiReviewed
  • 23rd14 showpiece shader, ASCII and footer components for React and Svelte 5 via the shadcn CLI, with an agent skill; no licence file.Verdict NicheLook only licence, not statedAgent channels llms-txt, registry, skillReviewed
  • 3dicons1,500+ CC0 rendered 3D icons with an online editor and a Figma plugin.Verdict UsefulShip licence, public domainAgent channels noneReviewed
  • 8bitcnRetro 8-bit shadcn/ui skin: 56 components, 63 blocks, game UI pieces and 21 themes.Verdict Very usefulShip licence, open source permissiveAgent channels registryReviewed
  • Aave Design & EngineeringAave Labs’ engineering article pairs live glass-effect controls with a cross-browser SVG displacement and WebGL implementation.Verdict NicheConditional licence, proprietary freeAgent channels noneReviewed
  • Aceternity UI200+ React and Tailwind landing-page components and blocks (heroes, bento grids, shaders); the elaborate blocks are paid.Verdict Very usefulConditional licence, proprietary paidAgent channels mcpReviewed
  • Adobe SpectrumAdobe's Spectrum design system pairs visual foundations, components and patterns with separate open-source implementations.Verdict Very usefulConditional licence, mixedAgent channels noneReviewed
  • Ahmad ShadeedHands-on CSS layout articles and an interactive lab for inspecting modern selectors, grids and container queries.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Amacro86 full-screen theme and page reveal effects on View Transitions, delivered as copyable CSS snippets.Verdict NicheShip licence, open source permissiveAgent channels noneReviewed
  • AmicroBig MIT shadcn registry of loaders, card fans, carousels and micro-interactions; young and changing fast.Verdict UsefulShip licence, open source permissiveAgent channels cli, registryReviewed
  • Angular NativeAlpha MIT framework for building native iOS and Android apps with Angular, Expo and React Native's rendering layer.Verdict NicheShip licence, open source permissiveAgent channels llms-txtReviewed
  • AnimataCopy-in animated React components, 157 at review, browsed as moving previews rather than static screenshots.Verdict UsefulLook only licence, not statedAgent channels llms-txtReviewed
  • Animate UIAnimated Radix/Base UI/Headless UI primitives, styled components and 260 animated Lucide icons via the shadcn CLI.Verdict UsefulConditional licence, source availableAgent channels llms-txt, registryReviewed
  • Animated shadcn/uiAlpha MIT set of stock shadcn/ui components with Motion added, installed via its own CLI or npm package.Verdict NicheShip licence, open source permissiveAgent channels cliReviewed
  • Anime.jsJavaScript animation engine with fine-grained control over complex sequences and SVG effects, and a clear, well-documented API.Verdict UsefulShip licence, open source permissiveAgent channels noneReviewed
  • Annnimate105 GSAP components in React, Vue and HTML from a studio, with an MCP for paid subscribers.Verdict UsefulConditional licence, proprietary paidAgent channels mcp, llms-txtReviewed
  • Apple Human Interface GuidelinesApple platform UI reference with concrete examples for color, navigation, controls and adaptive interface states.Verdict UsefulConditional licence, proprietary freeAgent channels noneReviewed
  • AppllamaiOS app screen and flow archive with recorded walkthroughs, screen details and cross-app comparisons.Verdict Very usefulConditional licence, proprietary paidAgent channels mcpReviewed
  • ArcReact components and interactive blocks with motion and live examples.Verdict UsefulConditional licence, mixedAgent channels noneReviewed
  • AstryxMeta's React design system with rich form controls, strong accessibility hooks and a plugin-based table.Verdict Very usefulShip licence, open source permissiveAgent channels cliReviewed
  • Atelier UIAn interactive library of shader and motion components with a live preview, adjustable controls and copyable implementation prompts.Verdict UsefulConditional licence, mixedAgent channels llms-txt, cli, promptsReviewed
  • Atlassian DesignAtlassian's design system: tokens, primitives, component guidelines and accessibility rules, with llms.txt files for agents.Verdict UsefulShip licence, open source permissiveAgent channels llms-txtReviewed
  • audiocnTwenty-three audio components and sixteen Web Audio hooks for React, copied into your project with the shadcn CLI.Verdict UsefulShip licence, open source permissiveAgent channels registry, llms-txtReviewed
  • AuraAI landing-page builder with templates, components, assets, a ~725-file DESIGN.md library and a remote MCP.Verdict UsefulConditional licence, proprietary paidAgent channels mcpReviewed
  • Awesome Design SystemsA tagged index of public design systems that helps you compare their components, voice guidance, designer kits and source links.Verdict UsefulShip licence, public domainAgent channels noneReviewed
  • Base CNCommunity port of the shadcn/ui components to Base UI, installed through a namespaced registry.Verdict NicheShip licence, open source permissiveAgent channels llms-txt, registryReviewed
  • Base UIUnstyled, accessible React primitives from the Radix, Floating UI and MUI teams, now shadcn's default.Verdict Very usefulShip licence, open source permissiveAgent channels llms-txtReviewed
  • BearnieMIT shadcn-style registry for Astro: about 60 accessible components copied in by CLI or MCP server, no framework runtime, llms-full.txt.Verdict UsefulShip licence, open source permissiveAgent channels mcp, llms-txt, cliReviewed
  • Beautiful UI21 polished MIT shadcn components for agent UIs: thinking states, approvals, tool chips, task rows, diff tables and a prompt bar.Verdict Very usefulShip licence, open source permissiveAgent channels registryReviewed
  • Bencho38 live, tunable React blocks whose "Copy prompt" hands an agent full source plus token-mapping instructions.Verdict UsefulShip licence, open source permissiveAgent channels promptsReviewed
  • bendayAn MIT React component that turns a logo into a halftone mark with 21 controllable loading and agent-state animations.Verdict UsefulShip licence, open source permissiveAgent channels registry, llms-txtReviewed
  • BentoGridsA visual catalogue of tile based layouts with category and theme filters and links to the live sites behind each example.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • beUIMIT motion components, agent UI and charts with llms.txt, JSON API, agent skill and hosted MCP; paid Pro adds blocks and templates.Verdict Very usefulConditional licence, mixedAgent channels mcp, llms-txt, registry, api, skillReviewed
  • blocks.soFree MIT shadcn app blocks (dialogs, auth, onboarding, stats, sidebars) from the @blocks-so registry.Verdict UsefulShip licence, open source permissiveAgent channels registryReviewed
  • BoardUIReact and Tailwind design system for dashboards and agentic interfaces, with 103 components, 19 charts and an MCP server that installs source.Verdict Very usefulConditional licence, mixedAgent channels mcp, llms-txt, skill, registryReviewed
  • BricksWordPress visual builder whose pitch is the design system underneath the canvas — classes, variables, palettes and theme styles, with breakpoints on the canvas.Verdict UsefulConditional licence, proprietary paidAgent channels noneReviewed
  • Canvas UI35 GPU effects over live, clickable HTML in WebGL or WebGPU, for six frameworks through a shadcn registry.Verdict Very usefulConditional licence, source availableAgent channels llms-txt, registryReviewed
  • Canvas UI Qwen DemoAn interactive Canvas UI showcase that previews shader effects over live HTML and keeps its controls and install snippets beside each example.Verdict UsefulConditional licence, source availableAgent channels registryReviewed
  • Carbon Design SystemIBM's Apache-2.0 system: about 50 components, 2,775 icons and 1,576 pictograms, llms.txt, and an IBMid-gated MCP.Verdict Very usefulShip licence, open source permissiveAgent channels mcp, llms-txt, skillReviewed
  • Chánh ĐạiA design-engineer portfolio framed by isometric line art, hand-drawn annotations and a deep catalogue of components, blocks and projects.Verdict UsefulConditional licence, mixedAgent channels llms-txtReviewed
  • CharmPurple, playful developer-tools homepage that turns a family of terminal UI libraries into a cohesive visual brand.Verdict NicheConditional licence, mixedAgent channels noneReviewed
  • Chloé MaillotA quiet design-engineer portfolio combining short editorial notes, a small component catalogue and a handmade image grid.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Circle Loaders24 standalone animated SVG loading spinners.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • Collect UIDaily feed of UI shots and motion clips, 150+ element categories with designer leaderboards.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Componentry53 animated React effects, from text and WebGL hero backgrounds to image effects, installed through the shadcn CLI.Verdict UsefulShip licence, open source permissiveAgent channels llms-txt, registryReviewed
  • coss uiCal.com's Base UI design system with composed particles and agent skills; mixed MIT/AGPL repo.Verdict Very usefulConditional licence, mixedAgent channels llms-txt, registry, skillReviewed
  • CueHand-picked web interaction and UI component references with motion demos and prompts for recreating them.Verdict UsefulLook only licence, not statedAgent channels promptsReviewed
  • Cult UITextured, distinctive marketing components and shader heroes built with Motion; paid blocks and templates.Verdict UsefulConditional licence, mixedAgent channels registryReviewed
  • daisyUIMIT Tailwind plugin of semantic component classes and 35 themes; llms.txt doubles as a skill, paid Blueprint MCP.Verdict Very usefulConditional licence, mixedAgent channels mcp, llms-txt, skillReviewed
  • DesEngsDated feed of about 106 design-engineering links (tools, libraries, essays, jobs) plus site, minimal-site and designer galleries; MIT source.Verdict UsefulShip licence, open source permissiveAgent channels noneReviewed

Patterns worth reusing ​

  • Copy code into the repo instead of installing a closed package, so the component stays fully editable (shadcn/ui, mapcn).
  • Compare how several mature design systems name and structure the same component before fixing your own API (The Component Gallery).
  • Split a catalog into components (atoms), blocks (full sections) and templates (whole pages), each with its own level of "already assembled" (UIAble).
  • Extend an established registry model (like shadcn's) into a specific domain, such as maps, instead of only generic UI (mapcn).
  • Offer install at multiple depths — copy-paste, npm, CLI — so developers pick their own level of control (Aceternity UI).
  • Build agent-aware pieces (plan cards, citations, diffs) directly into the catalog for AI product interfaces (Kobra, Astryx).
  • Use hook-based plugin extension (sort, select, resize, tree) for complex components like tables instead of a growing prop list (Astryx).
  • Add a command palette to navigate a large catalog rather than relying on categories alone (UIAble).
  • Design small and large variants of a component separately rather than scaling one drawing down (Libraries.dev: Thinking orbs).
  • Publish an llms.txt that lists each component with its install command, source link and dependencies, so an agent can pick and install the right piece (Rare UI).
  • Let a generator render and screenshot its own output, then compare it with the target and fix the differences (Screenshot to Code).
  • Wrap a proven headless library in shadcn-style parts for complex widgets such as Gantt charts, Kanban boards and editors, and export each as small pieces teams can rearrange (Kibo UI).
  • Export a headless hook that owns the behaviour next to a styled example, so reskinning only means changing classes (interior.dev).
  • Take the registry model beyond web UI: email (emailcn), PDF (pdfcn), Open Graph cards (ogimagecn), terminals (termcn), video (Remocn, framecn) and sound (sensory-ui, soundcn).
  • Keep one token set and compile it for each renderer, so a theme works across engines without a redesign (emailcn, pdfcn).
  • Before building a component, check it against a list of states, traps and ARIA requirements, with accessibility items inside each component's checklist (UI Playbook, Design System Checklist, Inclusive Components).
  • Give each component page separate usage, style, code and accessibility tabs, and document flows such as empty states and loading as patterns, not single components (Carbon Design System).
  • Hand agents a copy-prompt that includes the full source and tells them to map the component's tokens onto the project's own (Bencho).

Pitfalls ​

  • Copied-code libraries don't update automatically — you have to re-copy or manually merge changes later (shadcn/ui, mapcn).
  • Heavier animation dependencies (Framer Motion, GSAP, three.js) add real bundle weight if many effects are used at once (Aceternity UI, React Bits, UIAble).
  • Community-submitted catalogs vary widely in accessibility and maintenance quality — check provenance before adopting (Uiverse, community galleries generally).
  • Some libraries carry restrictive licences (Commons Clause, proprietary tiers) — treat them as ideas and reference implementations, not code to repackage (React Bits, Kobra, Rare UI).
  • Generated components are written for the stack you pick, not your existing components and tokens, so expect to restructure them (Screenshot to Code).
  • Small catalogues can pull in several extra dependencies per component; check the list before installing (Rare UI).
  • Many new shadcn-style registries are young, single-maintainer projects, and some namespaces aren't in shadcn's public directory, so the registry entry has to be added by hand (pdfcn, editorcn).
  • Registry metadata can be wrong: framecn items declared remotion as a dependency while importing @editframe/react, so check package.json after installing.
  • The engine underneath may need its own licence even when the components are MIT: Remotion for companies above three employees (Remocn), Editframe above three people (framecn).
  • "Free" can still restrict reuse: Canvas UI adds the Commons Clause, Transitions.dev forbids redistributing the collection, and Orbkit and shadercn include non-commercial orbs.
  • Carbon's packages run a telemetry postinstall script; set CARBON_TELEMETRY_DISABLED=1 to opt out.