# 114 UI Components tools and resources (104 free) 114 UI Components resources, picked out of 22 saved Instagram reels and 121 liked tweets, from creators like @shadcn, @Jakubantalik, @orcdev. 104 of them are free, freemium or open source. ## All 114 - [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source) - [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium) - [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium) - [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium) - [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium) - [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source) - [Magic UI](https://xiry.app/resources/magic-ui): Animated React and Tailwind UI components designed for landing pages (Website, Freemium) - [Relume](https://xiry.app/resources/relume): AI-driven website sitemaps, wireframes, and production-ready component library (Web app, Freemium) - [Sales CRM](https://xiry.app/resources/sales-crm): Open-source dark-mode sales CRM dashboard built with Next.js and Claude (Web app, Free) - [Spell UI](https://xiry.app/resources/spell-ui): Refined, copy-paste React and Tailwind CSS components with micro-interactions (GitHub repo, Open source) - [Transitions.dev](https://xiry.app/resources/transitions-dev): Curated library of copy-paste web app micro-interactions and transitions (Web app, Freemium) - [Boneyard](https://xiry.app/resources/boneyard): Auto-generates pixel-perfect skeleton screens directly from your real rendered DOM (GitHub repo, Open source) - [coss ui](https://xiry.app/resources/coss-ui): Modern UI component library built on top of Base UI (Web app, Free) - [Cult UI](https://xiry.app/resources/cult-ui-2540): Open-source animated UI components and blocks built for shadcn/ui projects (Website, Free) - [Family's tray system](https://xiry.app/resources/family-s-tray-system): Web recreation of Family's native iOS bottom-sheet tray system (Web app, Free) - [Liquid Glass](https://xiry.app/resources/liquid-glass): React component library for Apple-style liquid glass and blur effects. (Website, Open source) - [magic-spells/bottom-sheet](https://xiry.app/resources/magic-spells-bottom-sheet-2461): Lightweight, accessible Web Component for building gesture-driven bottom sheets on the web. (GitHub repo, Open source) - [MicroKit UI](https://xiry.app/resources/microkit-ui): Free copy-paste React and CSS micro-interactions for modern web interfaces (Website, Free) - [NumberFlow](https://xiry.app/resources/numberflow-2047): Animated, accessible rolling-number component built on native Intl.NumberFormat and Web Animations. (Web app, Open source) - [Osmo](https://xiry.app/resources/osmo): Resource vault and toolkit of animations, components, and transitions for Webflow and HTML (Website, Paid) - [prompt-kit Primitives](https://xiry.app/resources/prompt-kit-primitives): Fullstack building blocks for AI apps installable with shadcn CLI (Web app, Open source) - [ReUI](https://xiry.app/resources/reui): Curated shadcn/ui components, application blocks, animated elements, and MCP server. (Website, Freemium) - [Shadcn Admin](https://xiry.app/resources/shadcn-admin-2502): Admin dashboard templates and UI blocks built with shadcn/ui and Tailwind (Website, Freemium) - [Shaders](https://xiry.app/resources/shaders): Open-source WebGPU shader component library and free design editor. (Web app, Open source) - [12 Modern UI Component Libraries](https://xiry.app/resources/12-modern-ui-component-libraries): Curated directory of modern UI component libraries and micro-interaction resources. (List, Free) - [7 UI Libraries You'll Actually Ship With](https://xiry.app/resources/7-ui-libraries-you-ll-actually-ship-with): A curated list of seven modern UI component libraries for web apps (List, Free) - [Aceternity UI](https://xiry.app/resources/aceternity-ui): Animated copy-paste React and Tailwind CSS components for modern websites. (Website, Freemium) - [Aceternity UI Pro](https://xiry.app/resources/aceternity-ui-pro): Templates and animated component blocks built with Next.js, Tailwind, and Motion (Web app, Paid) - [AI UI Building Resources](https://xiry.app/resources/ai-ui-building-resources): Curated list of component libraries and tools for AI-assisted UI design (List, Free) - [Amicro](https://xiry.app/resources/amicro): Micro-interaction and transition UI component library built with React and Motion (Web app) - [Animated Loading Button in SwiftUI](https://xiry.app/resources/animated-loading-button-in-swiftui): Pattern for building a multi-state morphing button in SwiftUI (Tip, Free) - [Animmaster Lib](https://xiry.app/resources/animmaster-lib): Catalog of 300 animated frontend UI components, shaders, and effects (Website, Paid) - [assistant-ui](https://xiry.app/resources/assistant-ui): Open-source TypeScript and React component library for building AI chat interfaces (Web app, Open source) - [Aura](https://xiry.app/resources/aura): AI-powered landing page builder with animated templates and component library (Website, Freemium) - [bazza/ui Data Table Filter](https://xiry.app/resources/bazza-ui-data-table-filter): Linear-style data table filtering component for React, shadcn/ui, and TanStack Table (Web app, Open source) - [blobatar](https://xiry.app/resources/blobatar): Deterministic geometric blob avatar generator with zero dependencies. (GitHub repo, Open source) - [blocks.so](https://xiry.app/resources/blocks-so): Open-source copy-paste UI blocks built with shadcn/ui and Tailwind CSS (Web app, Free) - [BoardUI](https://xiry.app/resources/boardui): React and Tailwind dashboard UI kit with agentic progress and chat components. (Web app, Freemium) - [Border Beam](https://xiry.app/resources/border-beam): Animated border beam component for buttons, cards, and input fields (Web app, Free) - [Building via shadcn Registry Blocks](https://xiry.app/resources/building-via-shadcn-registry-blocks): A workflow for assembling apps by pulling registry JSON blocks via CLI (Framework, Free) - [Canvas UI](https://xiry.app/resources/canvas-ui): Open-source html-in-canvas UI component library powered by WebGL and WebGPU (Web app, Free) - [Catalyst](https://xiry.app/resources/catalyst): Official React application UI kit built by the Tailwind CSS team. (Website, Paid) - [COBE](https://xiry.app/resources/cobe): Lightweight 5KB WebGL globe with CSS anchor positioning support (Web app, Open source) - [Creating AI Animation (Unicorn Studio Remix)](https://xiry.app/resources/creating-ai-animation-unicorn-studio-remix): Editable WebGL animation starter kit for an AI loading pill component (Web app, Freemium) - [Dice UI](https://xiry.app/resources/dice-ui): Accessible, copy-paste shadcn-compatible React components with input masking support (GitHub repo, Open source) - [ElevenLabs UI](https://xiry.app/resources/elevenlabs-ui): Open-source audio and AI agent React components inspired by shadcn (Web app, Free) - [Evil Charts](https://xiry.app/resources/evil-charts): Animated React chart components styled for shadcn/ui and Tailwind CSS (Web app, Open source) - [Figcomponents](https://xiry.app/resources/figcomponents): Curated library of copy-and-paste UI components and layouts for Figma (Website, Freemium) - [Filters (by Andrew Luo)](https://xiry.app/resources/filters-by-andrew-luo): Linear-inspired React component for adding and editing sentence-style filter tokens (Web app, Open source) - [Font Awesome Docs: Animating Icons](https://xiry.app/resources/font-awesome-docs-animating-icons): Official documentation for adding built-in CSS animations to Font Awesome icons (Website, Freemium) - [Framepad](https://xiry.app/resources/framepad): UI kit and design system of components and layouts for Framer. (Website, Paid) - [Framer University Button Components](https://xiry.app/resources/framer-university-button-components): Free, animated button components ready to remix and paste into Framer. (Website, Free) - [Gray UI CRM](https://xiry.app/resources/gray-ui-crm): Open-source CRM data grid and interface template built with Next.js and shadcn/ui (GitHub repo, Open source) - [HeroUI](https://xiry.app/resources/heroui): Accessible React and React Native UI component library styled with Tailwind CSS (Website, Freemium) - [icons-animated](https://xiry.app/resources/icons-animated): Open-source animated icons installable via shadcn CLI for multiple frameworks (Web app, Open source) - [img-fx](https://xiry.app/resources/img-fx): Animated pixel-mosaic image loader and reveal component library (Web app, Free) - [itshover](https://xiry.app/resources/itshover): Open-source animated SVG icon library for React and shadcn/ui. (GitHub repo, Open source) - [Kibo UI](https://xiry.app/resources/kibo-ui): Component registry and pattern library for shadcn/ui and React (Website, Free) - [Kobra](https://xiry.app/resources/kobra): Animated, shadcn-compatible React component library with specialized agent UI primitives (Web app, Freemium) - [Kobra Grouped Table](https://xiry.app/resources/kobra-grouped-table): React issue table component that glides into rows when resized (Web app, Paid) - [LDRS](https://xiry.app/resources/ldrs): Free, open-source loading spinners and animations built as web components. (Website, Open source) - [Libraries.dev](https://xiry.app/resources/libraries-dev): Crafted React UI effect libraries designed for modern and AI apps (Website, Freemium) - [Liquid DOM](https://xiry.app/resources/liquid-dom): WebGPU library rendering Apple-style liquid glass materials for the web. (GitHub repo, Open source) - [Liquid Orb Editor](https://xiry.app/resources/liquid-orb-editor): WebGPU visual editor for customizable liquid glass AI loading orbs (Web app, Free) - [Make It Animated](https://xiry.app/resources/make-it-animated): Curated React Native animations and components reverse-engineered from popular apps (Website, Paid) - [mapcn Blocks](https://xiry.app/resources/mapcn-blocks): Pre-built, copy-paste React map blocks styled with Tailwind and MapLibre. (Website, Open source) - [Midday React PDF Invoice Template](https://xiry.app/resources/midday-react-pdf-invoice-template): Open-source React PDF template and Next.js route for rendering invoices (Website, Open source) - [morphicons](https://xiry.app/resources/morphicons): Zero-dependency library to smoothly morph SVG stroke icons using spring physics (Web app, Open source) - [my-react-native-playground](https://xiry.app/resources/my-react-native-playground): Open-source collection of advanced React Native UI animations and components (GitHub repo, Open source) - [Nexvyn UI](https://xiry.app/resources/nexvyn-ui): Polished React UI components with motion, built for design engineers (Website, Open source) - [nivo](https://xiry.app/resources/nivo): React data visualization components built on top of D3 (Website, Open source) - [ObsidianUI](https://xiry.app/resources/obsidianui): Open-source React and Tailwind CSS UI component and animation library (Web app, Free) - [Opensource UI](https://xiry.app/resources/opensource-ui): Free copy-paste React and Next.js components and device mockups (Web app, Open source) - [Originkit](https://xiry.app/resources/originkit): Curated library of animated and interactive UI components for modern websites (Web app, Freemium) - [PaceUI Blocks](https://xiry.app/resources/paceui-blocks): Pre-built React auth and marketing UI blocks built on shadcn (Web app, Freemium) - [pdfcn](https://xiry.app/resources/pdfcn): Copy-pasteable React PDF components built on Takumi and Forme engines (GitHub repo, Open source) - [Pixel-Perfect](https://xiry.app/resources/pixel-perfect): A copy-paste React component and animation library for web apps (GitHub repo, Open source) - [Planes](https://xiry.app/resources/planes): Animated React and Tailwind UI component registry with motion interactions (Website, Paid) - [prompt-kit](https://xiry.app/resources/prompt-kit): Accessible, customizable React UI components built specifically for AI interfaces (GitHub repo, Open source) - [React Bits — Color Bends](https://xiry.app/resources/react-bits-color-bends): Animated Three.js shader background component for React with customizable flow and colors (Web app, Open source) - [React Bits — Prism](https://xiry.app/resources/react-bits-prism): Rotating glowing 3D prism animated background component for React. (Web app, Free) - [React Bits Micro](https://xiry.app/resources/react-bits-micro): Free, animated micro-interaction components for React interfaces (Web app, Freemium) - [React Icons](https://xiry.app/resources/react-icons): Popular icon sets available as importable React SVG components. (Website, Open source) - [React Native Paper](https://xiry.app/resources/react-native-paper): Open-source Material Design component library for React Native apps (Website, Open source) - [Receipt Printer](https://xiry.app/resources/receipt-printer): Animated React component simulating a physical receipt printing on checkout completion. (Free) - [Resizable - shadcn/ui](https://xiry.app/resources/resizable-shadcn-ui): Accessible React component for building resizable panel layouts (Web app, Open source) - [SaaS UI Illustrations](https://xiry.app/resources/saas-ui-illustrations): Free vector illustrations designed for component documentation and design systems (Website, Free) - [Shadcn Dashboard](https://xiry.app/resources/shadcn-dashboard): Open-source dashboard kit and UI blocks built with shadcn/ui and Base UI (Website, Freemium) - [Shadcn Filters](https://xiry.app/resources/shadcn-filters): Composable shadcn/ui filter components with URL persistence and TanStack integration (Web app, Freemium) - [shadcn Registry Directory](https://xiry.app/resources/shadcn-registry-directory): Discover and pull third-party component registries directly via the shadcn CLI (Website, Free) - [shadcn/designer](https://xiry.app/resources/shadcn-designer): React component primitives for building canvas-based design and visual editing tools (Web app, Paid) - [shadcn/ui — Trace, Code Block & AI Elements](https://xiry.app/resources/shadcn-ui-trace-code-block-and-ai-elements): React and Tailwind UI components and patterns for agentic AI interfaces. (Website, Open source) - [shadcn/ui Dashboard Example](https://xiry.app/resources/shadcn-ui-dashboard-example): Open-source reference dashboard built with React 19 and Tailwind CSS v4 (Web app, Free) - [ShadcnSpace](https://xiry.app/resources/shadcnspace): UI blocks, components, and templates built on shadcn/ui and Tailwind CSS (Website, Freemium) - [Skiper UI](https://xiry.app/resources/skiper-ui): Animated, uncommon UI components installable directly via shadcn CLI (Website, Freemium) - [Snappy UI](https://xiry.app/resources/snappy-ui): React component and animation library built with Tailwind and Motion (Website, Freemium) - [Solace UI](https://xiry.app/resources/solace-ui): UI blocks, components, and templates for Next.js and Tailwind CSS (Web app, Freemium) - [Sona UI — FluidTooltip](https://xiry.app/resources/sona-ui-fluidtooltip): Animated tooltip component that glides smoothly across interactive elements (Web app, Free) - [Sonner](https://xiry.app/resources/sonner): An opinionated, polished toast notification component for React. (Web app, Open source) - [Sprrrint](https://xiry.app/resources/sprrrint): Curated library of Figma and Framer UI components, templates, and gradients (Website, Freemium) - [Sprrrint - Jay Dwivedi Components](https://xiry.app/resources/sprrrint-jay-dwivedi-components): Free, polished UI components and visual assets ready to copy into Figma (Website, Free) - [Swapy](https://xiry.app/resources/swapy): Framework-agnostic JavaScript tool to convert any layout into drag-to-swap elements (GitHub repo, Open source) - [SwiftUI Modern Animated OTP Input Pattern](https://xiry.app/resources/swiftui-modern-animated-otp-input-pattern): SwiftUI guide for creating animated OTP verification inputs with validation states (Tip, Free) - [tablecn Data Grid](https://xiry.app/resources/tablecn-data-grid): Open-source editable data grid built with shadcn/ui and TanStack Table (Web app, Open source) - [Tailark](https://xiry.app/resources/tailark): Shadcn UI registry of marketing blocks, pages, and illustrations. (Web app, Freemium) - [The anatomy of shadcn/ui](https://xiry.app/resources/the-anatomy-of-shadcn-ui): Technical deep dive into the architecture and patterns behind shadcn/ui (Article or course, Free) - [Thinking Orbs](https://xiry.app/resources/thinking-orbs): Animated loading and status orb components for AI agent interfaces (Web app, Free) - [tweakcn](https://xiry.app/resources/tweakcn): Visual theme editor and code generator for shadcn/ui and Tailwind CSS (Web app, Freemium) - [Tweeq](https://xiry.app/resources/tweeq): Parameter-tuning GUI widgets designed for creative software and direct manipulation (Article or course, Free) - [Updated List of Awesome shadcn Block Libraries](https://xiry.app/resources/updated-list-of-awesome-shadcn-block-libraries): A curated directory of 27 component and block libraries for shadcn/ui (List, Free) - [useLayouts](https://xiry.app/resources/uselayouts): Free animated React components built with Framer Motion and Tailwind CSS (Website, Free) - [VantaUI](https://xiry.app/resources/vantaui): UI library and templates built from real products for React and Next.js (Web app, Freemium) - [Vengeance UI](https://xiry.app/resources/vengeance-ui): Animated React components and interactions for modern landing pages. (Website, Free) - [voice-glow](https://xiry.app/resources/voice-glow): Audio-reactive animated aurora glow for AI voice inputs and assistants (GitHub repo, Freemium) More topics in Development: [Web Scraping](https://xiry.app/topics/development/web-scraping.md), [Developer Tools](https://xiry.app/topics/development/developer-tools.md), [Browser Automation](https://xiry.app/topics/development/browser-automation.md), [AI Coding Tools](https://xiry.app/topics/development/ai-coding-tools.md), [AI Coding Prompts](https://xiry.app/topics/development/ai-coding-prompts.md), [Boilerplates & Starters](https://xiry.app/topics/development/boilerplates-starters.md), [AI Coding Workflows](https://xiry.app/topics/development/ai-coding-workflows.md), [AI Workflows](https://xiry.app/topics/development/ai-workflows.md), [Server Security](https://xiry.app/topics/development/server-security.md) Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.