# data/libraries.ts · screen/col

[View on GitCafe](https://git.cafe/screen/col/blob/2246882dba7a01d9858f47d5e43ff40ec8569a85/data/libraries.ts)

Repository: [screen/col](https://git.cafe/screen/col)

Visibility: public

Requested revision: 2246882dba7a01d9858f47d5e43ff40ec8569a85

Requested commit: 2246882dba7a01d9858f47d5e43ff40ec8569a85

Commit: 2246882dba7a01d9858f47d5e43ff40ec8569a85

Blob: 2bbfc7683bb0621e01d03270d24f61889a73dfec

Size: 23076 bytes

[Immutable source](https://git.cafe/screen/col/blob/2246882dba7a01d9858f47d5e43ff40ec8569a85/data/libraries.ts?format=markdown)

```
/**
 * 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"],
  },
];

```