/**
* 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.
* - Set `addedAt` to an ISO timestamp when adding a library. Its new additions
* label expires seven days after that timestamp.
*
* Verified components live separately in `data/components.ts`, keyed by this
* file's `slug`. They grow on a different cadence: libraries arrive rarely,
* but one component collection can document hundreds of components at once.
*/
export const CATEGORIES = [
"Component Library",
"Animation & Motion",
"Templates & Blocks",
"Icons",
"Charts & Data Viz",
"3D & WebGL",
"CSS Framework",
"Design Inspiration",
] as const;
export const FRAMEWORK_STACKS = [
"React",
"Next.js",
"Vue",
"Svelte",
"SvelteKit",
"Angular",
"SolidJS",
"Astro",
"Vanilla JS",
] as const;
export const STACKS = [
...FRAMEWORK_STACKS,
"Tailwind CSS",
"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 const isFrameworkStack = (stack: Stack): boolean => (FRAMEWORK_STACKS as readonly string[]).includes(stack);
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[];
/** When this library joined the catalog, used for the seven-day new label. */
addedAt?: 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:
"Animated, interactive React components, from text effects and backgrounds to small 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:
"Editable React components styled with Tailwind CSS, with Base UI, Radix UI, and React Aria implementations.",
url: "https://ui.shadcn.com",
category: "Component Library",
stacks: ["React", "Next.js", "Astro", "Tailwind CSS", "TypeScript"],
useCases: ["Dashboards", "Accessibility-first", "Rapid Prototyping"],
tags: ["base ui", "radix", "react aria", "copy paste", "accessible"],
},
{
name: "Magic UI",
slug: "magic-ui",
description:
"More than 150 free animated components and effects for landing pages, built with React, TypeScript, and Tailwind CSS.",
url: "https://magicui.design",
category: "Animation & Motion",
stacks: ["React", "Next.js", "Tailwind CSS", "TypeScript"],
useCases: ["Landing Pages", "Marketing Sites", "Micro-interactions"],
tags: ["animated", "effects", "framer motion"],
},
{
name: "Aceternity UI",
slug: "aceternity-ui",
description:
"Animated components and page sections for modern websites, including hero effects, 3D cards, and scroll-driven experiences.",
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 production-ready animation library for React and JavaScript, formerly known as 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:
"A widely used JavaScript animation library with timelines, ScrollTrigger, 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: "React Aria Components",
slug: "react-aria",
addedAt: "2026-10-07T06:02:56+04:00",
description:
"Unstyled React components with accessible interactions, internationalization, and composable APIs from Adobe.",
url: "https://react-aria.adobe.com",
category: "Component Library",
stacks: ["React", "TypeScript"],
useCases: ["Accessibility-first", "Dashboards"],
tags: ["headless", "unstyled", "adobe", "react spectrum", "internationalization"],
},
{
name: "HeroUI",
slug: "heroui",
description:
"A modern React UI library with built-in theming, formerly known as 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:
"A React implementation of Google's Material Design with a large ecosystem of components and tools.",
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-focused React design system with a broad set of 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:
"A Tailwind CSS plugin that adds semantic component classes such as btn and card, with no JavaScript 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 matching Figma files, covering 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:
"Animated components built on Motion that you copy into your project and adjust to fit.",
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:
"A consistent, open-source icon set that began as a community fork of Feather Icons, with packages for most frameworks.",
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 for dashboards, including charts, KPI cards, and data displays, styled with Tailwind CSS.",
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 that lets you build 3D scenes and WebGL experiences as components.",
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:
"A Svelte port of shadcn/ui with accessible components you copy straight into your Svelte app.",
url: "https://www.shadcn-svelte.com",
category: "Component Library",
stacks: ["Svelte", "SvelteKit", "Tailwind CSS", "TypeScript"],
useCases: ["Rapid Prototyping", "Dashboards"],
tags: ["svelte", "copy paste"],
},
{
name: "PrimeVue",
slug: "primevue",
description:
"A large UI component suite for Vue with more than 90 components, plus ready-made 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", "SolidJS", "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"],
},
{
name: "Intent UI",
slug: "intent-ui",
addedAt: "2026-10-03T23:44:09+04:00",
description: "Accessible React components built with React Aria and Tailwind CSS, installed as editable source.",
url: "https://intentui.com",
category: "Component Library",
stacks: ["React", "Next.js", "Tailwind CSS", "TypeScript"],
useCases: ["Accessibility-first", "Dashboards", "Rapid Prototyping"],
tags: ["react aria", "copy paste", "registry", "justd"],
},
{
name: "ReUI",
slug: "reui",
addedAt: "2026-10-03T23:44:09+04:00",
description: "React components and patterns for shadcn/ui projects, with Base UI and Radix UI variants.",
url: "https://reui.io",
category: "Component Library",
stacks: ["React", "Next.js", "Tailwind CSS", "TypeScript"],
useCases: ["Dashboards", "Data Visualization", "Rapid Prototyping"],
tags: ["shadcn", "registry", "base ui", "radix", "data grid"],
},
{
name: "ElevenLabs UI",
slug: "elevenlabs-ui",
addedAt: "2026-10-03T23:44:09+04:00",
description: "React components for audio players, waveforms, transcription, and voice agent interfaces.",
url: "https://ui.elevenlabs.io",
category: "Component Library",
stacks: ["React", "Next.js", "Tailwind CSS", "TypeScript"],
useCases: ["Rapid Prototyping", "Micro-interactions", "Creative & Experimental"],
tags: ["audio", "voice agents", "waveform", "ai", "shadcn"],
},
{
name: "Inspira UI",
slug: "inspira-ui",
addedAt: "2026-10-03T23:44:09+04:00",
description: "Animated Vue and Nuxt components for text effects, backgrounds, and interactive websites.",
url: "https://inspira-ui.com",
category: "Animation & Motion",
stacks: ["Vue", "Tailwind CSS", "TypeScript"],
useCases: ["Landing Pages", "Marketing Sites", "Creative & Experimental"],
tags: ["nuxt", "animated", "copy paste", "motion-v", "shadcn-vue"],
},
{
name: "Reka UI",
slug: "reka-ui",
addedAt: "2026-10-03T23:44:09+04:00",
description: "Unstyled, accessible Vue primitives for custom design systems, formerly Radix Vue.",
url: "https://reka-ui.com",
category: "Component Library",
stacks: ["Vue", "TypeScript"],
useCases: ["Accessibility-first", "Dashboards"],
tags: ["nuxt", "headless", "primitives", "radix vue", "unstyled"],
},
{
name: "Melt UI",
slug: "melt-ui",
addedAt: "2026-10-03T23:44:09+04:00",
description: "Headless, accessible builders and component wrappers for Svelte 5, using the next-generation melt package.",
url: "https://next.melt-ui.com",
category: "Component Library",
stacks: ["Svelte", "SvelteKit", "TypeScript"],
useCases: ["Accessibility-first", "Dashboards"],
tags: ["headless", "builders", "svelte 5", "runes", "unstyled"],
},
{
name: "Zard UI",
slug: "zard-ui",
addedAt: "2026-10-03T23:44:09+04:00",
description: "Accessible Angular components styled with Tailwind CSS and copied into your project through a CLI.",
url: "https://www.zardui.com",
category: "Component Library",
stacks: ["Angular", "Tailwind CSS", "TypeScript"],
useCases: ["Accessibility-first", "Dashboards", "Rapid Prototyping"],
tags: ["shadcn", "copy paste", "angular cdk", "standalone", "analog"],
},
{
name: "Spartan UI",
slug: "spartan-ui",
addedAt: "2026-10-03T23:44:09+04:00",
description: "Accessible Angular primitives with editable Tailwind styles, split into brain behavior and helm components.",
url: "https://spartan.ng",
category: "Component Library",
stacks: ["Angular", "Tailwind CSS", "TypeScript"],
useCases: ["Accessibility-first", "Dashboards", "Rapid Prototyping"],
tags: ["spartan-ng", "brain", "helm", "headless", "copy paste", "analog"],
},
{
name: "Corvu",
slug: "corvu",
addedAt: "2026-10-03T23:44:09+04:00",
description: "Unstyled, accessible SolidJS primitives for overlays, calendars, drawers, and resizable layouts.",
url: "https://corvu.dev",
category: "Component Library",
stacks: ["SolidJS", "TypeScript"],
useCases: ["Accessibility-first", "Dashboards"],
tags: ["headless", "primitives", "unstyled", "solid", "resizable"],
},
{
name: "Starwind UI",
slug: "starwind-ui",
addedAt: "2026-10-03T23:44:09+04:00",
description: "Editable Tailwind components for Astro and React, with Vue and Svelte adapters in public beta.",
url: "https://starwind.dev",
category: "Component Library",
stacks: ["Astro", "React", "Next.js", "Vue", "Svelte", "SvelteKit", "Tailwind CSS", "TypeScript"],
useCases: ["Accessibility-first", "Landing Pages", "Rapid Prototyping"],
tags: ["copy paste", "cli", "portable runtime", "vue beta", "svelte beta"],
},
{
name: "WebcoreUI",
slug: "webcoreui",
addedAt: "2026-10-03T23:44:09+04:00",
description: "Configurable components, blocks, and templates for Astro, Svelte, and React, styled with Sass.",
url: "https://webcoreui.dev",
category: "Component Library",
stacks: ["Astro", "Svelte", "React", "TypeScript"],
useCases: ["Landing Pages", "Marketing Sites", "Rapid Prototyping"],
tags: ["sass", "scss", "themes", "blocks", "multi framework"],
},
{
name: "Web Awesome Core",
slug: "web-awesome",
addedAt: "2026-10-03T23:44:09+04:00",
description: "Framework-independent web components from Font Awesome, with built-in themes and React wrappers.",
url: "https://webawesome.com",
category: "Component Library",
stacks: ["Vanilla JS", "React", "Vue", "Angular", "Svelte", "TypeScript"],
useCases: ["Accessibility-first", "Dashboards", "Rapid Prototyping"],
tags: ["web components", "custom elements", "font awesome", "shoelace", "themes"],
},
];
/** Looks up a library by slug, throwing so a stale hard-coded slug fails the build instead of rendering a broken link. */
export function libraryBySlug(slug: string): Library {
const library = libraries.find((entry) => entry.slug === slug);
if (!library) throw new Error(`Unknown library "${slug}"`);
return library;
}
