/**
* The library registry — the heart of this project.
*
* Community members add new UI libraries by adding an entry to the
* `libraries` array below and opening a pull request.
*
* Guidelines:
* - `slug` must be unique, lowercase, kebab-case.
* - `url` must be the library's primary website or docs.
* - Pick from the existing Category / Stack / UseCase values when possible.
* - Keep descriptions to one or two short sentences.
*/
export const CATEGORIES = [
"Component Library",
"Animation & Motion",
"Templates & Blocks",
"Icons",
"Charts & Data Viz",
"3D & WebGL",
"CSS Framework",
"Design Inspiration",
] as const;
export const STACKS = [
"React",
"Vue",
"Svelte",
"Angular",
"Tailwind CSS",
"Vanilla JS",
"TypeScript",
] as const;
export const USE_CASES = [
"Landing Pages",
"Dashboards",
"Micro-interactions",
"Marketing Sites",
"Data Visualization",
"Accessibility-first",
"Rapid Prototyping",
"Creative & Experimental",
] as const;
export type Category = (typeof CATEGORIES)[number];
export type Stack = (typeof STACKS)[number];
export type UseCase = (typeof USE_CASES)[number];
export interface Library {
name: string;
slug: string;
description: string;
url: string;
category: Category;
stacks: Stack[];
useCases: UseCase[];
/** Free-form tags for extra search keywords. */
tags?: string[];
}
export const libraries: Library[] = [
{
name: "21st.dev",
slug: "21st-dev",
description:
"A marketplace of production-ready React components built by the community, installable in one command.",
url: "https://21st.dev",
category: "Component Library",
stacks: ["React", "Tailwind CSS", "TypeScript"],
useCases: ["Landing Pages", "Rapid Prototyping"],
tags: ["marketplace", "copy paste", "shadcn"],
},
{
name: "React Bits",
slug: "react-bits",
description:
"A collection of animated, interactive React components — text effects, backgrounds, and micro-interactions.",
url: "https://reactbits.dev",
category: "Animation & Motion",
stacks: ["React", "Tailwind CSS", "TypeScript"],
useCases: ["Micro-interactions", "Creative & Experimental"],
tags: ["animated", "text effects", "backgrounds"],
},
{
name: "Transitions.dev",
slug: "transition-dev",
description:
"Copy-and-paste UI transitions for web apps, with a skill for coding agents.",
url: "https://transitions.dev",
category: "Animation & Motion",
stacks: ["React", "TypeScript"],
useCases: ["Micro-interactions", "Marketing Sites"],
tags: ["transitions", "motion", "page transitions"],
},
{
name: "shadcn/ui",
slug: "shadcn-ui",
description:
"Beautifully designed, accessible components you copy into your project. Built on Radix UI and Tailwind CSS.",
url: "https://ui.shadcn.com",
category: "Component Library",
stacks: ["React", "Tailwind CSS", "TypeScript"],
useCases: ["Dashboards", "Accessibility-first", "Rapid Prototyping"],
tags: ["radix", "copy paste", "accessible"],
},
{
name: "Magic UI",
slug: "magic-ui",
description:
"150+ free animated components and effects for landing pages, built with React, TypeScript and Tailwind.",
url: "https://magicui.design",
category: "Animation & Motion",
stacks: ["React", "Tailwind CSS", "TypeScript"],
useCases: ["Landing Pages", "Marketing Sites", "Micro-interactions"],
tags: ["animated", "effects", "framer motion"],
},
{
name: "Aceternity UI",
slug: "aceternity-ui",
description:
"Trendy animated components and sections — hero effects, 3D cards, and scroll experiences for modern websites.",
url: "https://ui.aceternity.com",
category: "Animation & Motion",
stacks: ["React", "Tailwind CSS", "TypeScript"],
useCases: ["Landing Pages", "Creative & Experimental", "Marketing Sites"],
tags: ["animated", "hero", "scroll animations"],
},
{
name: "Motion",
slug: "motion",
description:
"A powerful, production-ready animation library for React and JavaScript (formerly Framer Motion).",
url: "https://motion.dev",
category: "Animation & Motion",
stacks: ["React", "Vanilla JS", "TypeScript"],
useCases: ["Micro-interactions", "Creative & Experimental"],
tags: ["framer motion", "gestures", "spring"],
},
{
name: "GSAP",
slug: "gsap",
description:
"The industry-standard JavaScript animation library with ScrollTrigger, timelines, and physics-based motion.",
url: "https://gsap.com",
category: "Animation & Motion",
stacks: ["Vanilla JS", "React", "Vue", "TypeScript"],
useCases: ["Creative & Experimental", "Micro-interactions", "Marketing Sites"],
tags: ["scrolltrigger", "timeline", "animation"],
},
{
name: "Radix UI",
slug: "radix-ui",
description:
"Unstyled, accessible primitives for building high-quality design systems and web apps in React.",
url: "https://www.radix-ui.com",
category: "Component Library",
stacks: ["React", "TypeScript"],
useCases: ["Accessibility-first", "Dashboards"],
tags: ["primitives", "headless", "a11y"],
},
{
name: "Base UI",
slug: "base-ui",
description:
"Unstyled, accessible React components from the creators of Radix, Floating UI, and Material UI.",
url: "https://base-ui.com",
category: "Component Library",
stacks: ["React", "TypeScript"],
useCases: ["Accessibility-first", "Dashboards"],
tags: ["headless", "primitives", "unstyled"],
},
{
name: "HeroUI",
slug: "heroui",
description:
"Beautiful, fast and modern React UI library with built-in theming (formerly NextUI).",
url: "https://www.heroui.com",
category: "Component Library",
stacks: ["React", "Tailwind CSS", "TypeScript"],
useCases: ["Dashboards", "Rapid Prototyping", "Landing Pages"],
tags: ["nextui", "theming", "dark mode"],
},
{
name: "Mantine",
slug: "mantine",
description:
"A fully featured React component library with 100+ components, hooks, and native dark theme support.",
url: "https://mantine.dev",
category: "Component Library",
stacks: ["React", "TypeScript"],
useCases: ["Dashboards", "Rapid Prototyping"],
tags: ["hooks", "forms", "full featured"],
},
{
name: "Chakra UI",
slug: "chakra-ui",
description:
"A simple, modular and accessible React component library with a style-props API.",
url: "https://chakra-ui.com",
category: "Component Library",
stacks: ["React", "TypeScript"],
useCases: ["Accessibility-first", "Rapid Prototyping", "Dashboards"],
tags: ["style props", "accessible", "theming"],
},
{
name: "Material UI (MUI)",
slug: "mui",
description:
"The most popular React implementation of Google's Material Design, with a huge ecosystem.",
url: "https://mui.com",
category: "Component Library",
stacks: ["React", "TypeScript"],
useCases: ["Dashboards", "Rapid Prototyping"],
tags: ["material design", "google", "enterprise"],
},
{
name: "Ant Design",
slug: "ant-design",
description:
"An enterprise-class React UI design system with a rich set of high-quality components.",
url: "https://ant.design",
category: "Component Library",
stacks: ["React", "TypeScript"],
useCases: ["Dashboards", "Data Visualization"],
tags: ["enterprise", "design system", "tables"],
},
{
name: "daisyUI",
slug: "daisyui",
description:
"The most popular component library plugin for Tailwind CSS — semantic class names, zero JS required.",
url: "https://daisyui.com",
category: "CSS Framework",
stacks: ["Tailwind CSS", "Vanilla JS"],
useCases: ["Rapid Prototyping", "Landing Pages"],
tags: ["tailwind plugin", "themes", "semantic"],
},
{
name: "Flowbite",
slug: "flowbite",
description:
"Open-source components built on Tailwind CSS, with versions for React, Vue, Svelte and Angular.",
url: "https://flowbite.com",
category: "Component Library",
stacks: ["Tailwind CSS", "React", "Vue", "Svelte", "Angular"],
useCases: ["Rapid Prototyping", "Dashboards", "Landing Pages"],
tags: ["tailwind", "multi framework"],
},
{
name: "Preline",
slug: "preline",
description:
"Open-source Tailwind CSS components with Figma design files — marketing, e-commerce and application UI.",
url: "https://preline.co",
category: "Templates & Blocks",
stacks: ["Tailwind CSS", "Vanilla JS", "React"],
useCases: ["Marketing Sites", "Landing Pages", "Rapid Prototyping"],
tags: ["tailwind", "figma", "blocks"],
},
{
name: "HyperUI",
slug: "hyperui",
description:
"Free, unstyled Tailwind CSS components for marketing, e-commerce and application interfaces.",
url: "https://www.hyperui.dev",
category: "Templates & Blocks",
stacks: ["Tailwind CSS"],
useCases: ["Marketing Sites", "Rapid Prototyping"],
tags: ["copy paste", "unstyled", "free"],
},
{
name: "coss ui",
slug: "origin-ui",
description:
"Copy-and-paste React components built on Base UI and Tailwind CSS, formerly Origin UI.",
url: "https://coss.com/ui",
category: "Component Library",
stacks: ["React", "Tailwind CSS", "TypeScript"],
useCases: ["Dashboards", "Rapid Prototyping"],
tags: ["origin ui", "base ui", "copy paste", "inputs", "shadcn"],
},
{
name: "Motion Primitives",
slug: "motion-primitives",
description:
"Beautifully designed, animated components powered by Motion — copy, paste, and customize.",
url: "https://motion-primitives.com",
category: "Animation & Motion",
stacks: ["React", "Tailwind CSS", "TypeScript"],
useCases: ["Micro-interactions", "Creative & Experimental"],
tags: ["animated", "copy paste", "motion"],
},
{
name: "Animata",
slug: "animata",
description:
"Hand-crafted animated components and interaction experiments for React and Tailwind.",
url: "https://animata.design",
category: "Animation & Motion",
stacks: ["React", "Tailwind CSS", "TypeScript"],
useCases: ["Creative & Experimental", "Micro-interactions"],
tags: ["animated", "experimental"],
},
{
name: "Lucide",
slug: "lucide",
description:
"Beautiful, consistent open-source icons — a community fork of Feather Icons for every framework.",
url: "https://lucide.dev",
category: "Icons",
stacks: ["React", "Vue", "Svelte", "Angular", "Vanilla JS"],
useCases: ["Rapid Prototyping", "Dashboards"],
tags: ["icons", "svg", "feather"],
},
{
name: "Recharts",
slug: "recharts",
description:
"A composable, React-native charting library built on SVG components.",
url: "https://recharts.github.io",
category: "Charts & Data Viz",
stacks: ["React", "TypeScript"],
useCases: ["Data Visualization", "Dashboards"],
tags: ["charts", "svg", "graphs"],
},
{
name: "Tremor",
slug: "tremor",
description:
"React components purpose-built for dashboards — charts, KPI cards, and data display built on Tailwind.",
url: "https://tremor.so",
category: "Charts & Data Viz",
stacks: ["React", "Tailwind CSS", "TypeScript"],
useCases: ["Dashboards", "Data Visualization"],
tags: ["dashboard", "charts", "analytics"],
},
{
name: "React Three Fiber",
slug: "react-three-fiber",
description:
"A React renderer for Three.js — build 3D scenes and WebGL experiences declaratively.",
url: "https://r3f.docs.pmnd.rs",
category: "3D & WebGL",
stacks: ["React", "TypeScript"],
useCases: ["Creative & Experimental", "Landing Pages"],
tags: ["three.js", "3d", "webgl"],
},
{
name: "shadcn-svelte",
slug: "shadcn-svelte",
description:
"The shadcn/ui experience, ported to Svelte — accessible, copy-and-paste components for Svelte apps.",
url: "https://www.shadcn-svelte.com",
category: "Component Library",
stacks: ["Svelte", "Tailwind CSS", "TypeScript"],
useCases: ["Rapid Prototyping", "Dashboards"],
tags: ["svelte", "copy paste"],
},
{
name: "PrimeVue",
slug: "primevue",
description:
"The most complete UI component suite for Vue — 90+ components, themes, and blocks.",
url: "https://primevue.org",
category: "Component Library",
stacks: ["Vue", "TypeScript"],
useCases: ["Dashboards", "Rapid Prototyping"],
tags: ["vue", "enterprise", "themes"],
},
{
name: "useLayouts",
slug: "uselayouts",
description: "Interactive React components for layouts, navigation, and polished UI interactions.",
url: "https://uselayouts.com",
category: "Component Library",
stacks: ["React", "Tailwind CSS", "TypeScript"],
useCases: ["Landing Pages", "Micro-interactions", "Rapid Prototyping"],
tags: ["layouts", "navigation", "animated components"],
},
{
name: "Nexvyn UI",
slug: "nexvyn-ui",
description: "React components with Tailwind styling and motion for accessible interfaces.",
url: "https://ui.nexvyn.dev",
category: "Component Library",
stacks: ["React", "Tailwind CSS", "TypeScript"],
useCases: ["Rapid Prototyping", "Micro-interactions", "Accessibility-first"],
tags: ["motion", "accessible"],
},
{
name: "Cult UI",
slug: "cult-ui",
description: "React components and effects built with TypeScript, Tailwind CSS, and motion.",
url: "https://cult-ui.com",
category: "Component Library",
stacks: ["React", "Tailwind CSS", "TypeScript"],
useCases: ["Landing Pages", "Creative & Experimental"],
tags: ["animated", "copy paste"],
},
{
name: "Spell UI",
slug: "spell-ui",
description: "Copy-ready React components, blocks, and templates for landing pages.",
url: "https://spell.sh",
category: "Component Library",
stacks: ["React", "Tailwind CSS"],
useCases: ["Landing Pages", "Marketing Sites"],
tags: ["animated", "effects", "copy paste"],
},
{
name: "Bencho",
slug: "bencho",
description: "Interactive UI blocks you can preview, adjust, and copy as code.",
url: "https://bencho.dev",
category: "Templates & Blocks",
stacks: [],
useCases: ["Micro-interactions", "Creative & Experimental"],
tags: ["interactive blocks", "drag", "hover"],
},
{
name: "Rare UI",
slug: "rare-ui",
description: "Open-source animated React components that install through the shadcn CLI.",
url: "https://rareui.com",
category: "Animation & Motion",
stacks: ["React"],
useCases: ["Micro-interactions", "Creative & Experimental"],
tags: ["animated", "shadcn", "copy paste"],
},
{
name: "Obsidian UI",
slug: "obsidian-ui",
description: "Animated React components built with Tailwind CSS and Motion.",
url: "https://obsidianui.dev",
category: "Animation & Motion",
stacks: ["React", "Tailwind CSS", "TypeScript"],
useCases: ["Creative & Experimental", "Micro-interactions"],
tags: ["animated", "interactive", "motion"],
},
{
name: "Design Spells",
slug: "design-spells",
description: "A gallery of interaction and motion details from real products for design inspiration.",
url: "https://designspells.com",
category: "Design Inspiration",
stacks: [],
useCases: ["Creative & Experimental", "Micro-interactions"],
tags: ["inspiration", "interaction gallery", "motion"],
},
{
name: "Ark UI",
slug: "ark-ui",
description: "Headless, accessible components for React, Vue, Svelte, and Solid design systems.",
url: "https://ark-ui.com",
category: "Component Library",
stacks: ["React", "Vue", "Svelte", "TypeScript"],
useCases: ["Accessibility-first", "Dashboards"],
tags: ["headless", "primitives", "solid"],
},
{
name: "Park UI",
slug: "park-ui",
description: "Styled, customizable design system components built with Ark UI and Panda CSS.",
url: "https://park-ui.com",
category: "Component Library",
stacks: ["React", "TypeScript"],
useCases: ["Accessibility-first", "Dashboards"],
tags: ["ark ui", "panda css", "design system", "solid"],
},
{
name: "Headless UI",
slug: "headless-ui",
description: "Unstyled, accessible components for React and Vue from the Tailwind CSS team.",
url: "https://headlessui.com",
category: "Component Library",
stacks: ["React", "Vue", "Tailwind CSS", "TypeScript"],
useCases: ["Accessibility-first", "Dashboards"],
tags: ["headless", "unstyled", "tailwind"],
},
{
name: "Tailwind CSS",
slug: "tailwind-css",
description: "A utility-first CSS framework for building custom interfaces directly in markup.",
url: "https://tailwindcss.com",
category: "CSS Framework",
stacks: ["Tailwind CSS"],
useCases: ["Landing Pages", "Dashboards", "Rapid Prototyping"],
tags: ["utilities", "css", "styling"],
},
{
name: "Kibo UI",
slug: "kibo-ui",
description: "Composable components and blocks distributed through a shadcn-compatible registry.",
url: "https://www.kibo-ui.com",
category: "Component Library",
stacks: ["React", "Tailwind CSS", "TypeScript"],
useCases: ["Dashboards", "Rapid Prototyping"],
tags: ["shadcn", "registry", "copy paste"],
},
{
name: "shadcnblocks",
slug: "shadcnblocks",
description: "Ready-made page sections, components, and templates for shadcn/ui projects.",
url: "https://www.shadcnblocks.com",
category: "Templates & Blocks",
stacks: ["React", "Tailwind CSS", "TypeScript"],
useCases: ["Landing Pages", "Marketing Sites", "Rapid Prototyping"],
tags: ["shadcn", "blocks", "templates"],
},
{
name: "Ruixen UI",
slug: "ruixen-ui",
description: "Marketing sections and components for shadcn projects, with Radix and Base UI variants.",
url: "https://ruixen.com",
category: "Templates & Blocks",
stacks: ["React", "Tailwind CSS", "TypeScript"],
useCases: ["Landing Pages", "Marketing Sites"],
tags: ["shadcn", "registry", "base ui", "radix"],
},
{
name: "Fancy Components",
slug: "fancy-components",
description: "Playful React components and interactions, including physics-based Gravity effects.",
url: "https://www.fancycomponents.dev",
category: "Animation & Motion",
stacks: ["React", "Tailwind CSS", "TypeScript"],
useCases: ["Micro-interactions", "Creative & Experimental"],
tags: ["gravity", "physics", "animated"],
},
{
name: "Anime.js",
slug: "anime-js",
description: "JavaScript animation engine for DOM, SVG, CSS, and timelines.",
url: "https://animejs.com",
category: "Animation & Motion",
stacks: ["Vanilla JS", "TypeScript"],
useCases: ["Micro-interactions", "Creative & Experimental"],
tags: ["timeline", "svg", "animation"],
},
{
name: "React Spring",
slug: "react-spring",
description: "Spring-based animation tools for interactive React interfaces.",
url: "https://react-spring.dev",
category: "Animation & Motion",
stacks: ["React", "TypeScript"],
useCases: ["Micro-interactions", "Creative & Experimental"],
tags: ["spring", "gestures", "animation"],
},
{
name: "Lenis",
slug: "lenis",
description: "Smooth scrolling library for websites and scroll-driven experiences.",
url: "https://lenis.dev",
category: "Animation & Motion",
stacks: ["Vanilla JS", "React", "TypeScript"],
useCases: ["Marketing Sites", "Creative & Experimental"],
tags: ["smooth scroll", "scroll animation"],
},
{
name: "Rive",
slug: "rive",
description: "Create interactive animations and run them across web and native apps.",
url: "https://rive.app",
category: "Animation & Motion",
stacks: ["React", "Vanilla JS", "TypeScript"],
useCases: ["Micro-interactions", "Creative & Experimental"],
tags: ["interactive animation", "state machines", "runtime"],
},
{
name: "dotLottie",
slug: "dotlottie",
description: "A compact animation format and players for Lottie animations.",
url: "https://dotlottie.io",
category: "Animation & Motion",
stacks: ["React", "Vanilla JS", "TypeScript"],
useCases: ["Micro-interactions", "Marketing Sites"],
tags: ["lottie", "animation format", "player"],
},
{
name: "GodUI",
slug: "godui",
description: "Open-source motion components for React and shadcn/ui projects.",
url: "https://godui.design",
category: "Animation & Motion",
stacks: ["React", "Tailwind CSS", "TypeScript"],
useCases: ["Micro-interactions", "Creative & Experimental"],
tags: ["shadcn", "motion", "registry"],
},
{
name: "UI by Hampton",
slug: "hampton-ui",
description: "Open-source React components, blocks, and layouts for web apps.",
url: "https://ui.hampton.io",
category: "Component Library",
stacks: ["React", "Tailwind CSS", "TypeScript"],
useCases: ["Dashboards", "Landing Pages"],
tags: ["shadcn", "blocks", "layouts"],
},
{
name: "DiMAAC UI",
slug: "dimaac-ui",
description: "Animated React components for galleries, cards, scrolling, and text effects.",
url: "https://ui.dimaac.com",
category: "Animation & Motion",
stacks: ["React", "TypeScript"],
useCases: ["Micro-interactions", "Creative & Experimental"],
tags: ["gsap", "gallery", "scroll animation"],
},
{
name: "Satisium UI",
slug: "satisium-ui",
description: "Animated React components for shadcn/ui projects.",
url: "https://ui.satisium.com/",
category: "Animation & Motion",
stacks: ["React", "Tailwind CSS", "TypeScript"],
useCases: ["Micro-interactions", "Landing Pages"],
tags: ["shadcn", "gsap", "motion"],
},
{
name: "Wensity UI",
slug: "wensity-ui",
description: "React components, blocks, and templates installed as source through the Wensity CLI.",
url: "https://ui.wensity.com",
category: "Component Library",
stacks: ["React", "Tailwind CSS", "TypeScript"],
useCases: ["Landing Pages", "Rapid Prototyping"],
tags: ["blocks", "templates", "copy paste"],
},
{
name: "AI Canvas",
slug: "ai-canvas",
description: "A React component registry with previews and agent-assisted installation.",
url: "https://aicanvas.me",
category: "Component Library",
stacks: ["React", "TypeScript"],
useCases: ["Rapid Prototyping", "Landing Pages"],
tags: ["registry", "mcp", "ai"],
},
{
name: "CodeFronts",
slug: "codefronts",
description: "CSS components, motion examples, generators, and frontend tools.",
url: "https://codefronts.com",
category: "Templates & Blocks",
stacks: ["Vanilla JS", "Tailwind CSS"],
useCases: ["Rapid Prototyping", "Creative & Experimental"],
tags: ["css", "snippets", "motion"],
},
];
