# UI Components

> Copy-paste React, shadcn/ui and animated component libraries, icon sets and shader kits.

34 resources, curated by Harsh Chhajer for Narrative.

- [shadcn/ui - Foundation for your Design System](/resources/shadcnui-foundation-for-your-design-system/index.md): Build your own component library with composable, accessible, and customizable components. (https://ui.shadcn.com/)
- [Flutter Tilt - Parallax Hover Effects](/resources/flutter-tilt-parallax-hover-effects/index.md): Easily apply tilt parallax hover effects for Flutter applications. (https://amoshuke.github.io/flutter_tilt_book/)
- [Skiper UI - Un-common Components for shadcn/ui](/resources/skiper-ui-un-common-components-for-shadcnui/index.md): Discover unique, fast-growing components for your Next.js projects. (https://skiper-ui.com/)
- [prompt-kit - Core Building Blocks for AI Apps](/resources/prompt-kit-core-building-blocks-for-ai-apps/index.md): High-quality, accessible, and customizable components for AI interfaces. (https://www.prompt-kit.com/)
- [Motion-Primitives - UI kit to make beautiful](/resources/motion-primitives-ui-kit-to-make-beautiful/index.md): Build beautiful, animated interfaces faster with this open-source React UI kit. (https://motion-primitives.com/)
- [AI Elements - Component library for AI-native applications](/resources/ai-elements-component-library-for-ai-native-applications/index.md): Build AI-native applications faster with this component library and custom registry. (https://elements.ai-sdk.dev/)
- [Canvas UI - Creative Canvas](/resources/canvas-ui-creative-canvas/index.md): Add creative HTML-in-canvas effects to your web projects with this open-source library. (https://canvasui.dev/)
- [Chakra UI - Simple, Modular & Accessible UI Components](/resources/chakra-ui-simple-modular-and-accessible-ui-components/index.md): Build accessible React applications and design systems with speed using this component system. (https://chakra-ui.com/)
- [The Component Gallery - Repository of interface components](/resources/the-component-gallery-repository-of-interface-components/index.md): Explore a comprehensive repository of interface components from various design systems. (https://component.gallery/)
- [Shoogle - shadcn UI Components & Blocks Search Engine](/resources/shoogle-shadcn-ui-components-and-blocks-search-engine/index.md): Quickly find shadcn UI blocks, components, and templates across various registries. (https://shoogle.dev/)
- [HeroUI v3 - Beautiful by default, customizable by design](/resources/heroui-v3-beautiful-by-default-customizable-by-design/index.md): Build beautiful, accessible React UI components with this modern library. (https://www.heroui.com/)
- [Shadcnexamples - Shadcn UI Components and Blocks](/resources/shadcnexamples-shadcn-ui-components-and-blocks/index.md): Access a growing library of production-ready shadcn/ui examples and blocks. (https://shadcnexamples.com/)
- [tweakcn - Beautiful themes for shadcn/ui](/resources/tweakcn-beautiful-themes-for-shadcnui/index.md): Design and customize themes for shadcn/ui with an interactive editor and generator. (https://tweakcn.com/)
- [Kibo UI - Custom registry of composable](/resources/kibo-ui-custom-registry-of-composable/index.md): Access a custom registry of high-quality, composable, and accessible shadcn/ui components. (https://www.kibo-ui.com/)
- [Cult UI - Shadcn UI Components, Blocks & Templates](/resources/cult-ui-shadcn-ui-components-blocks-and-templates/index.md): Get open-source Shadcn UI components, animated blocks, and full templates for your projects. (https://www.cult-ui.com/)
- [Reverse UI - Premium Animated UI Components](/resources/reverse-ui-premium-animated-ui-components/index.md): Supercharge your web apps with a premium collection of animated UI components. (https://reverseui.com/)
- [Componentry - Animated UI Components for React](/resources/componentry-animated-ui-components-for-react/index.md): Get beautiful, animated React UI components with styling and motion handled. (https://componentry.dev/)
- [useAnimations - A Micro-Animations Library](/resources/useanimations-a-micro-animations-library/index.md): Implement animated icons in Lottie Framework for your applications or websites. (https://useanimations.com/)
- [lucide-animated - Free Animated React Icons Library](/resources/lucide-animated-free-animated-react-icons-library/index.md): Access 350+ beautifully crafted animated React icons for your projects. (https://lucide-animated.com/)
- [AnimateIcons - Free Animated React Icons](/resources/animateicons-free-animated-react-icons/index.md): Make every icon move with over 1100 free animated SVG icons for React. (https://animateicons.vercel.app/)
- [Anime.js - JavaScript Animation Engine](/resources/animejs-javascript-animation-engine/index.md): A fast, multipurpose, and lightweight JavaScript animation library for the web. (https://animejs.com/)
- [Fancy Components - Ready-to-Use React Components](/resources/fancy-components-ready-to-use-react-components/index.md): Add fun and unique microinteractions to your website with free React components. (https://www.fancycomponents.dev/)
- [Originkit - Free Animated Component Library](/resources/originkit-free-animated-component-library/index.md): The largest free animated component library for building modern websites. (https://www.originkit.dev/)
- [React Bits - Animated UI Components For React](/resources/react-bits-animated-ui-components-for-react/index.md): An open-source collection of 200+ animated, interactive, and customizable React components. (https://reactbits.dev/)
- [21st - 12,000+ Crafted React & Tailwind UI](/resources/21st-12000-crafted-react-and-tailwind-ui/index.md): Access a vast library of React and Tailwind CSS components and templates. (https://21st.dev/)
- [Takumi - Open Graph Images & PDFs from JSX](/resources/takumi-open-graph-images-and-pdfs-from-jsx/index.md): Generate Open Graph images and PDFs directly from JSX, HTML, and CSS. (https://takumi.kane.tw/)
- [Rare UI - Rare Animated React Components](/resources/rare-ui-rare-animated-react-components/index.md): Drop uncommon, animated React components straight into your codebase for free. (https://www.rareui.com/)
- [beUI - Animated Components for React & Next.js](/resources/beui-animated-components-for-react-and-nextjs/index.md): Access free, open-source animated components for React and Next.js. (https://beui.dev/)
- [MetalForge - Shaders for SwiftUI, React Native & Web](/resources/metalforge-shaders-for-swiftui-react-native-and-web/index.md): Create beautiful shaders and animations for various platforms without writing shader code. (https://metalforge.xyz/)
- [OpenShaders - Shaders Belong on the Web](/resources/openshaders-shaders-belong-on-the-web/index.md): Claim your username and get a unique shader generated for the web. (https://openshaders.com/)
- [Oat - Ultra-lightweight HTML UI Component Library](/resources/oat-ultra-lightweight-html-ui-component-library/index.md): Build web applications with a semantic, zero-dependency HTML UI component library. (https://oat.ink/)
- [Osmo - Dev Toolkit Built to Flex](/resources/osmo-dev-toolkit-built-to-flex/index.md): Access a growing toolkit of Webflow and HTML resources for creative developers. (https://www.osmo.supply/)
- [UI Tools - For Designers & Developers](/resources/ui-tools-for-designers-and-developers/index.md): Free open-source UI tools for generating design elements. (https://tools.ui-layouts.com/)
- [Creative Tim - Ship products 10x faster](/resources/creative-tim-ship-products-10x-faster/index.md): Creative Tim helps you ship products faster with UI, automations, and AI agents. (https://www.creative-tim.com/)
