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.
shadcn/ui is an open-source collection of accessible, composable UI components designed to be copied directly into your codebase rather than installed as an opaque dependency. Built primarily on Radix UI primitives and styled with Tailwind CSS, it gives developers full ownership and customization of component source code.
Efferd is a collection of ready-to-use, customizable UI blocks built on shadcn/ui, Radix UI, and Base UI. It allows developers to copy code or pull blocks directly into their React or Next.js projects via the shadcn CLI without dealing with npm packages.
Motion (formerly Framer Motion) is a lightweight web animation library that provides declarative syntax, gesture controls, and layout transitions. It combines hardware-accelerated browser APIs with a JavaScript engine to produce smooth UI interactions at a small bundle size. Developers can use it directly via framework components or plain JavaScript, supported by prebuilt UI templates and AI developer tooling.
React Bits is a collection of over 200 animated, interactive React components, text effects, and shader backgrounds. Instead of acting as an external dependency, components are copied directly into your codebase via CLI or copy-paste with full source access. It includes visual editors to tune parameters before exporting to JS, TS, CSS, or Tailwind.
21st.dev is an open registry of React components, templates, and shadcn themes created by design engineers. Instead of installing a rigid npm package, users can preview components live and copy them directly as code or prompt snippets ready for AI coding agents like Cursor, Claude Code, and Lovable.
lucide-animated is an open-source library featuring over 350 animated React icons based on the Lucide icon set. Built using Motion, each icon includes smooth micro-interactions that trigger on hover. Icons can be copied directly or installed into React and Next.js projects using the shadcn CLI.
Magic UI is a component collection built with React, TypeScript, Tailwind CSS, and Motion that focuses on interactive animations and visual effects. It works alongside shadcn/ui to provide copy-paste components like animated lists, notification feeds, and background particles. While over 150 components are free and open source, it also offers a paid Pro tier with pre-built landing page templates.
Relume uses AI to generate complete multi-page sitemaps and responsive wireframes from a short business brief. Built on a modular component system, designs can be exported to Figma, Webflow, and React or published directly through Relume's hosting platform.
Sales CRM is a web-based sales dashboard template built in Next.js using Claude and design-engineering prompt skills. It provides a dense, interactive pipeline interface featuring company tracking, win probability indicators, and activity trends. It serves as both a functional CRM starter project and a design reference for complex data tables.
Spell UI is an open source collection of polished React and Tailwind CSS components built for modern web apps and landing pages. It provides animated micro-interactions and creative UI elements—such as interactive cards, dynamic inputs, and gradient effects—that you can copy and paste directly into your project.
Transitions.dev is a curated gallery of hand-crafted UI transitions and micro-interaction snippets designed by Jakub Antalik. It offers self-contained, copy-paste CSS and React code with live interactive previews, accessible reduced-motion guards, and integration options for AI coding agents.
Boneyard is a frontend tool that eliminates hand-crafted skeleton loading states by capturing the exact layout of your rendered components. Using a CLI backed by headless browser automation, it snapshots components across breakpoints and exports static JSON layouts that your UI components load with zero layout shift. It works across major frontend frameworks including React, Preact, Vue, Svelte, Angular, and React Native.
coss ui is an open-source React component library built on Base UI designed for both human developers and AI coding workflows. It provides over 500 modular components and particles spanning form inputs, navigation, overlays, and feedback elements. It speeds up interface development by offering accessible, ready-to-use primitives that can be integrated directly into web projects.
Cult UI is an open-source library of animated React components, blocks, and templates built to drop directly into shadcn/ui and Tailwind CSS setups. It includes over 150 components ranging from micro-interactions like hover-reveal cards to full UI flows like multi-step onboarding modals and device mockups. Everything is copy-pasteable, MIT licensed, and optimized for Next.js and TypeScript projects.
An interactive web demo by Emil Kowalski recreating Family's native iOS stacked bottom sheets using Vaul and Framer Motion. It showcases how to replicate complex native drag-to-dismiss trays and stacked modal transitions in a browser environment. It serves as a visual and functional reference implementation for front-end engineers building mobile-friendly web interfaces.
Liquid Glass is a React UI library that recreates Apple's dynamic translucent glass materials and refraction effects across modern web browsers and Electron. It provides prebuilt components for surfaces, toolbars, menus, controls, and progressive blur that work over light and dark backgrounds.
magic-spells/bottom-sheet is an accessible custom element for mobile-style bottom sheets, built on top of the native dialog element. It features velocity-aware dismissal, physics-based spring settling, and intelligent gesture delegation between sheet dragging and internal content scrolling. Because it is a standard Web Component, it works across frameworks with minimal overhead.
MicroKit UI is an open-source gallery of animated UI micro-interactions, such as glowing buttons, hover reveals, sliding tabs, and focus fields. Each interaction is provided as standalone React, CSS, or Tailwind code with no third-party runtime package required, and can also be installed directly via the shadcn CLI.
NumberFlow is an open-source, dependency-free web component that creates smooth, rolling digit transitions when numbers change. Built on Intl.NumberFormat and standard Web Animations APIs, it supports localization, custom prefixes and suffixes, and reduced-motion preferences out of the box. It works as a vanilla custom element or with modern UI frameworks like React.
Osmo is a curated platform of production-ready web animations, interactive components, easings, and icons built by award-winning creative developers Dennis Snellenberg and Ilja van Eck. It provides copy-paste code and Webflow assets to help developers quickly build polished, award-level interactions without starting from scratch.
prompt-kit Primitives provides ready-to-use, composable fullstack blocks for React AI applications. Each primitive pairs a prebuilt UI component using Tailwind CSS and shadcn/ui with an API route powered by the Vercel AI SDK (v5). You can drop functional AI interfaces like streaming chatbots and tool-calling flows directly into your codebase using a single CLI command.
ReUI is a design system platform expanding shadcn/ui with over a thousand free components, animated special effects, and production-ready application blocks. It supports quick installation via shadcn CLI and integrates with coding agents through a hosted Model Context Protocol (MCP) server.
Shadcn Admin provides production-ready admin dashboard templates, UI components, and blocks built with shadcn/ui, Tailwind CSS, and TypeScript. It offers multi-framework starter projects for Next.js, React (Vite), and Vue, covering specialized use cases like ecommerce and CRM. Developers can copy prebuilt dashboard blocks or use the full templates to quickly ship back-office interfaces.
Shaders is an open-source library that provides production-ready WebGPU shader visual effects packaged as components for modern web frameworks. It includes a browser-based design editor to visually customize, create, and export shader effects directly into code.
A curated list of twelve modern component libraries, design galleries, and animation toolkits for front-end developers. It highlights specialized resources ranging from pattern archives to ready-to-copy animated interactive components.
A list of seven practical UI component libraries and design resource hubs shared by indie creators. It helps front-end developers and designers find fresh, copy-paste components and design inspiration outside mainstream frameworks. Each entry includes direct web links and creator credits.
Aceternity UI is a curated collection of copy-paste React components and landing page blocks styled with Tailwind CSS and Framer Motion. It gives developers pre-built complex visual effects, such as 3D card perspectives, interactive globes, and animated borders, without building them from scratch. It is particularly popular for modern SaaS landing pages.
Aceternity UI Pro is a premium collection of copy-paste website templates and animated component blocks compatible with the shadcn CLI. Built on Next.js, Tailwind CSS, Motion, and TypeScript, it helps developers assemble modern landing pages without building complex animation interactions from scratch.
A curated directory of web resources designed to improve front-end design when working with AI coding agents. It collects specialized component libraries, promptable design templates, and agent memory tools to produce higher-quality interfaces. Useful for developers using AI code assistants who want better UI patterns than generic defaults.
Amicro provides ready-to-use micro-transitions and interactive UI components for modern web apps. Built using React and Motion, it offers modular effects organized across multiple interaction categories.
A concise guide for creating a state-driven iOS button that animates between normal, loading, and success states. It demonstrates how to transition button dimensions, corner radius, and inner content using standard SwiftUI primitives and spring animations. It is a practical reference for polished form submissions and async actions.
Animmaster Lib is a collection of 300 frontend animation components designed to emulate award-winning websites. It includes code for scroll interactions, WebGL shaders, 3D animations, hero sections, and mouse effects that can be integrated manually or with AI coding assistants.
assistant-ui provides modular React primitives and CLI scaffolding to integrate AI chat copilots into web applications. It handles streaming, markdown, and keyboard shortcuts while allowing developers to render generative UI from model tool calls. It integrates directly with the Vercel AI SDK, LangGraph, and custom backend streams.
Aura is an AI landing page design platform created by Meng To and the Design+Code team. It features prompt-based page generation alongside a rich catalog of modern, animated, and WebGL-enhanced components. Users can visually tweak designs, export them directly to HTML or Figma, and deploy sites in one click.
An open-source UI component and React hook for adding faceted filtering to data tables, inspired by Linear's interface. It supports text, numbers, dates, and single or multi-select options across both client-side and server-side filtering workflows. It integrates with shadcn/ui, TanStack Table, and nuqs.
blobatar is a lightweight open-source library that turns any string or username into a consistent geometric blob avatar. It requires no image storage or external assets, rendering directly in the browser with accessible color contrast and optional animations.
blocks.so is a free collection of production-ready React UI components built on top of shadcn/ui and Tailwind CSS. It provides pre-styled blocks for complex patterns like file uploads, AI chat, sidebars, and onboarding flows with code previews and direct v0 export. It helps developers quickly assemble web interfaces without building common layouts from scratch.
BoardUI is a component library and design system built with React, Tailwind CSS, and Figma tokens for dashboards and AI interfaces. It includes specialized blocks for AI applications, such as streaming agent task lists, thinking states, token limit cards, and Recharts-based data cards. It integrates via CLI and Model Context Protocol (MCP) so AI coding agents can install components directly into your codebase.
Border Beam is a ready-to-use UI component library that adds animated light streaks traveling along component borders. Created by Jakub Antalik, it supports multiple beam styles and color variations with both light and dark mode integration.
A development pattern introduced by shadcn that treats app development like component shopping across distributed registries. By referencing public or self-hosted registry JSON files via the shadcn CLI, developers can instantly install pre-wired dashboards, third-party authentication flows, custom stats blocks, and themes directly into their codebase.
Canvas UI is a component library that renders live, interactive HTML elements inside an HTML canvas using real-time WebGL and WebGPU shaders. It allows developers to apply advanced visual effects—like fluid simulations, particle dispersals, and glass refractions—directly over standard DOM elements. Components install directly into codebases using the shadcn CLI pattern across major frameworks.
Catalyst is a collection of accessible, styled application UI components created by Tailwind Labs. Built on top of Headless UI and Tailwind CSS, it is delivered as copy-paste source code rather than an npm package, allowing full customization within your own project.
COBE is an ultra-lightweight, zero-dependency WebGL globe library that renders interactive dotted 3D globes. In version 2, it integrates with the CSS Anchor Positioning API, exposing anchor points and visibility CSS variables so you can bind standard HTML elements like badges, tooltips, and cards directly to 3D coordinates.
This is a remixable Unicorn Studio project template created by George Hastings featuring an animated AI loading pill with a glowing orb effect. Users can open the project in Unicorn Studio's WebGL editor, tweak the visual parameters, and embed it into web applications. It serves as a ready-to-use visual asset for AI generation status indicators.
Dice UI is an open-source React component collection built with TypeScript and Tailwind CSS, fully compatible with shadcn/ui. It extends standard component registries with specialized primitives, notably input fields that automatically format and mask values like phone numbers, dates, credit cards, and currencies.
ElevenLabs UI is a collection of React components designed specifically for building audio, voice, and conversational AI interfaces. Modeled after shadcn's copy-and-paste design system, it provides prebuilt widgets like audio visualizers, chat orbs, and auto-scrolling conversation containers. It allows developers to quickly integrate voice and chat UI into web apps without building audio-driven UI elements from scratch.
Evil Charts is an open-source library of animated, interactive React chart components built on Recharts and Apache ECharts. Designed to integrate directly with shadcn/ui and Tailwind CSS, components can be added via the shadcn CLI or copied into projects with dark-mode styling and loading states built in.
Figcomponents is a curated directory of website sections, landing pages, mobile screens, and UI elements. Designers can copy components directly to their clipboard and paste fully editable layouts straight onto their Figma canvas. It includes both open-access components under CC BY 4.0 and premium templates.
Filters is an open-source React UI component hosted on 21st.dev that replicates Linear's sentence-style filtering bar. It combines popovers, command search palettes, and token chips with operators like 'is' or 'is not' to build complex query builders. Developers can drop the code directly into Tailwind CSS and shadcn/ui setups.
This reference guide details Font Awesome's built-in CSS animation classes and custom properties. It demonstrates how to apply and tweak motion effects like beat, bounce, buzz, flip, float, and spin directly with CSS classes. It is useful for front-end developers wanting subtle UI motion without custom keyframes.
Framepad is a comprehensive UI kit and design system built specifically for Framer. It includes hundreds of pre-made responsive components, section layouts, and pre-built pages configured with global text and color styles. It lets designers and developers assemble polished Framer sites quickly without rebuilding standard UI elements from scratch.
A curated collection of over 30 free interactive Framer button components created by Framer University. Each button includes built-in hover and tap animations—such as like buttons, glowing effects, slide animations, and gradient borders—that can be remixed directly into Framer projects.
An open-source CRM frontend showcase built using Next.js App Router, Tailwind CSS, and shadcn/ui primitives. It provides a preconfigured data grid architecture with inline editing, slide-over detail drawers, and task management using local mock data. It is designed as a practical reference implementation for developers building complex SaaS table interfaces.
HeroUI (formerly NextUI) is an open-source design system and component library built on top of React Aria and Tailwind CSS v4. It provides accessible, styled primitives across web and React Native apps, alongside native integrations for AI coding agents such as MCP servers and llms.txt files.
icons-animated is a collection of crafted animated icons built with Motion and based on icon sets like Lucide, Huge Icons, Phosphor, Tabler, and Heroicons. It allows developers to browse animations online and install individual icons directly into their web projects using the shadcn CLI registry. It supports React, Vue, and Svelte.
img-fx is an animated image loader component library by designer Jakub Antalik. It replaces standard loading spinners with an animated pixelated mosaic reveal effect that gradually resolves into the final image. It supports dark and light modes across various aspect ratios.
itshover is an open-source library of motion-first animated icons built with React and Motion. It provides drop-in React components that trigger purposeful micro-animations on hover or user interaction. Developers can install icons directly through shadcn CLI or copy the TypeScript source code directly into their projects.
Kibo UI is a free, open-source component registry designed to extend shadcn/ui with React, Tailwind CSS, and Radix UI. It provides dozens of custom components (like color pickers and dropzones), full UI blocks, and over 1,000 ready-made component pattern variants to copy directly into projects.
Kobra is a component library built for React and Tailwind CSS that integrates directly with the shadcn CLI. Alongside standard layout, feedback, and form components, it provides specialized UI primitives for AI applications like reasoning steps, streaming text, file diffs, and task lists.
A Linear-style grouped table component built with React and Tailwind CSS. It categorizes items by status and uses animated column transitions that collapse neatly into individual row cards as available width shrinks. It can be added to codebases via the shadcn CLI or downloaded individually.
LDRS is an open-source library of lightweight, animated loaders built using HTML, CSS, and SVG. They are packaged as standard web components and React components, making them compatible with modern web frameworks without complex dependencies. Developers can preview dozens of loader styles and configure parameters like size, speed, and color directly via attributes.
Libraries.dev is a collection of production-ready React UI visual effects built by Jakub Antalik, including animated border beams, thinking orbs, liquid metal, and gooey animations. The open-source npm packages are optimized for dark modern interfaces and designed to integrate easily into coding agents like Cursor or Claude Code. An interactive playground lets you preview effects, with a paid Studio tier for deeper customization and presets.
Liquid DOM is a TypeScript monorepo that brings Apple-style liquid glass visual effects to the web using WebGPU. It combines a custom layout engine with a real-time shader pipeline to render dynamic refraction, dispersion, specular highlights, and shape morphing. It provides both low-level imperative scene graphs and declarative bindings for React, Three.js, and React Three Fiber.
Liquid Orb Editor is a web-based playground for generating animated, liquid-glass visual orbs powered by WebGPU. It lets you tweak refraction, motion, glow, and audio reactivity, then copy the resulting code to use as AI thinking or status animations in your apps.
Make It Animated is a curated library of 100+ production-ready React Native animations modeled after real micro-interactions in apps like Linear, Opal, Raycast, and Reddit. Built using Reanimated, Gesture Handler, and Skia, each animation includes fully documented code optimized for 60fps performance.
mapcn Blocks provides pre-built interactive map layouts designed to integrate directly into React projects via the shadcn CLI. Built on MapLibre GL and styled with Tailwind CSS, the components include complete UI patterns like delivery tracking, analytics maps, and store locators. It gives developers full ownership over the source code so they can customize styles and behavior directly.
An open-source invoice template built on @react-pdf/renderer from Midday. It renders customizable, cleanly designed PDF invoices using Geist Mono typography, Tiptap rich-text integration, and dynamic QR codes without requiring external rendering APIs.
morphicons is a lightweight, zero-dependency library and web playground that animates transitions between any two SVG stroke icons. It solves optimal rotation and path alignment in closed form using spring physics, preventing awkward cross-fades without requiring manual keyframes or wrapper setups. It works across React, Vue, Svelte, React Native, Astro, and plain JavaScript.
An open-source repository containing recreated mobile UI interactions and micro-animations built with React Native and Reanimated. It features practical implementations of popular design concepts, including a dynamic password-strength stroke animation, custom time pickers, and dynamic island transitions.
Nexvyn UI is a free, open-source React component library built with TypeScript and Tailwind CSS. It focuses on high-craft micro-interactions and smooth animations, with blueprint-style motion specifications. Components can be previewed live and installed directly via the shadcn CLI.
nivo is an open-source React data visualization library built on D3. It provides a wide variety of responsive, customizable chart types ranging from standard line and bar charts to complex Sankey diagrams and choropleth maps. It is notable for its rich interactivity, SVG and canvas rendering support, and polished aesthetics used in modern web apps like Fey.
ObsidianUI is a free collection of animated React and TypeScript components styled with Tailwind CSS. It focuses on micro-interactions, cursor effects, and layout blocks that developers can preview and paste directly into their frontend projects. It includes landing page templates, motion utilities, and a companion CLI for easy installation.
Opensource UI is a curated collection of over 200 MIT-licensed React components built with Next.js, TypeScript, and Tailwind CSS. It focuses on a copy-paste workflow with no npm package dependencies, giving developers direct ownership of the source code. The library includes common interface elements, interactive widgets, and detailed CSS device mockups like iPhones, MacBooks, and Apple Watches.
Originkit is a component directory featuring interactive visual effects, WebGL backgrounds, and animated UI elements. It lets you test animations with live property controls and export them directly to React code, Framer, or AI coding assistants via MCP.
PaceUI provides ready-to-use animated UI blocks, components, and templates for React, Next.js, and TanStack Start. It specializes in drop-in auth sections like login and registration forms featuring split layouts, social proof, and shader animations that can be installed directly or via an MCP server.
pdfcn is an open-source React component library and registry modeled after shadcn/ui, designed specifically for generating PDFs. It provides pre-built document blocks like invoices and financial reports using Takumi or Forme rendering engines, allowing developers to add and modify code directly via CLI without designing PDF layouts from scratch.
Pixel-Perfect is an open-source React component library focused on precise UI elements and custom animations, such as isometric SVG micro-interactions. It provides pre-built, responsive code designed to be copied directly into modern web projects. It is useful for frontend developers looking for polished interactive UI components without rebuilding animations from scratch.
Planes is a commercial React component library offering over 100 animated UI elements and interactive widgets built with Tailwind CSS and Framer Motion. Components are distributed shadcn-style directly into your project's codebase, giving full ownership over the source code. It includes an MCP server and llms.txt integration so coding assistants like Claude and Cursor can fetch and install components directly.
prompt-kit provides prebuilt UI primitives tailored for AI chat interfaces, agents, and autonomous assistants. Designed for React, Next.js, and Tailwind CSS, components can be added directly into projects using the shadcn CLI. It includes purpose-built blocks for streaming responses, collapsible tool calls, feedback bars, and chain-of-thought displays.
Color Bends is an animated React background component from the React Bits library powered by Three.js. It renders fluid, ribbon-like color gradients and waves that can be heavily customized through props like warp strength, speed, noise, and custom palettes. It also includes built-in interactive features like pointer influence and parallax shifts.
Prism is an animated WebGL background component from React Bits built with OGL. It renders a customizable, glowing triangular prism with shifting colors, film-grain noise, and optional mouse-tilt interactivity. Developers can copy the source code directly or install it via CLI to use behind landing page heroes.
React Bits Micro is a collection of over 30 animated micro-interaction components for React applications. It provides ready-to-use UI details like responsive toggles, dynamic loading indicators, voice pills, and interactive buttons that you can copy and customize directly in your codebase.
React Icons aggregates dozens of popular open-source icon sets into a single package for React applications. It uses standard ES6 imports so bundlers can tree-shake and only include the specific SVGs you render in your project. It saves you from installing separate wrapper packages for Font Awesome, Material Design, Ionicons, and others.
React Native Paper is a component library by Callstack implementing Material Design guidelines for React Native. It provides pre-built, standard-compliant components like buttons, cards, and dialogs across mobile platforms. It helps developers assemble mobile interfaces quickly without having to build custom styling from scratch.
Receipt Printer is a copy-paste React component designed by dqnamo that turns online payment processing into a realistic, animated receipt. It uses Tailwind CSS and Motion (Framer Motion) to simulate stepped paper feeding, complete with serrated paper edges and order breakdowns. It is an effective way to add tactile polish to SaaS checkouts and billing flows.
Resizable is a copy-paste React component in shadcn/ui built on top of Brian Vaughn's react-resizable-panels library. It provides accessible, keyboard-friendly split-pane layouts with horizontal or vertical orientations and optional drag handles.
SaaS UI Illustrations is a free collection of over 220 vector diagrams tailored specifically for UI components and framework documentation. It covers common interface elements like accordions, dialogs, data tables, and navigation patterns in a clean, consistent style. The assets are available as standalone SVG downloads, a bulk archive, or directly through Figma.
Shadcn Dashboard provides a production-ready collection of dashboard templates, UI blocks, and components for React, Next.js, and Tailwind CSS. It is built on Base UI primitives and comes pre-configured with auth, charts, tables, and AI-ready integrations like an MCP server and context-aware prompts.
ReUI Filters is a collection of production-ready filtering components built on top of shadcn/ui patterns. It connects directly to TanStack Table column filters, validates schema inputs via Zod, and synchronizes state with URL search parameters using nuqs. It provides ready-made chips, operator selectors, and multiple field types without having to build complex filter logic from scratch.
shadcn Registry Directory is a curated list of third-party community registries for shadcn/ui components, animations, and blocks. It allows frontend developers to discover niche libraries and install them straight into their codebase without manual configuration using namespaced CLI commands.
shadcn/designer provides composable React primitives for creating full-featured visual editors like Canva or Framer. It handles complex canvas mechanics like infinite scrolling, zoom, layer trees, history, and transform handles while letting developers style everything via Tailwind CSS. Instead of building canvas architecture from scratch, teams can assemble ready-made panes, toolbars, and custom layer types.
A release from shadcn/ui adding two primary components—Trace and Code Block—alongside AI Elements, a library of 21 design patterns for agentic chat interfaces. Trace provides a collapsible abstraction to render steps such as chain of thought, tool calls, plans, and subagents, while Code Block displays diffs, logs, and terminal output.
An open-source reference dashboard implementation built to test Tailwind CSS v4 and React 19. It showcases customizable theming, scalable layouts, charts, and interactive data tables with draggable, editable rows. It serves as a practical blueprint for structuring modern React web applications using shadcn/ui components.
ShadcnSpace is a UI library offering hundreds of ready-to-use blocks, components, and templates for React and Next.js applications. Built on Base UI and Radix UI primitives with Tailwind CSS, it allows developers to copy code directly or install sections via the shadcn CLI. It includes marketing layouts, dashboard interfaces, animated components, and matching Figma designs.
Skiper UI is an animated component library designed as an add-on layer for shadcn/ui and Next.js projects. It provides complex, highly interactive components like dynamic islands, image reveal effects, and cursor trails that can be added into a codebase with single CLI commands. Each component is self-contained in a single file with no extraneous dependencies.
Snappy UI is a collection of animated React UI components built on top of shadcn/ui, Tailwind CSS, and Motion. It provides ready-to-use interactive elements like image croppers and code displays that can be copied directly into projects with full documentation and props tables.
Solace UI is a component and layout library built for Next.js, Tailwind CSS, and Framer Motion. It offers pre-built UI components, animated elements, and full section blocks like bento grids, hero sections, and auth blocks for marketing websites.
FluidTooltip is a UI component from the Sona UI library that animates fluid transitions between adjacent toolbar icons. It provides a polished, interactive hover experience across both dark and light interface themes.
Sonner is an open-source React toast library designed with refined animations and stacking behavior. It provides an intuitive API for standard, promise-based, and actionable notifications, and serves as the default toast implementation in shadcn/ui.
Sprrrint is a design asset platform offering hundreds of ready-to-use components, full website templates, and gradient assets for Figma and Framer. It includes prebuilt landing page templates like Appit, designed specifically for showcasing mobile and social apps. It allows designers and developers to assemble marketing pages quickly with commercial rights included.
A curated collection of UI blocks and visual elements by designer Jay Dwivedi hosted on Sprrrint. Users can copy polished components directly to their clipboard and paste them directly into Figma without paying or creating an account.
Swapy is a lightweight JavaScript library that turns standard HTML layouts into drag-and-drop swappable elements using HTML data attributes. It is framework-agnostic, working seamlessly with plain JavaScript, React, Vue, and Svelte without altering complex layout CSS. It provides built-in animations and simple event hooks to capture layout changes.
This tutorial demonstrates how to build a clean, animated one-time password (OTP) verification screen in SwiftUI. It covers creating individual digit input boxes with advancing carets, a floating particle centerpiece, and visual validation states for success and failure. It serves as a practical pattern for enhancing authentication flows in iOS apps.
tablecn is an open-source React data grid and table collection created by sadmann7. It combines shadcn/ui components with TanStack Table to deliver inline editing, multi-column sorting, keyboard navigation, and multiplayer support out of the box. It solves the tricky implementation details of complex web spreadsheets without requiring paid enterprise libraries.
Tailark (formerly known as NSUI) is a component registry built on top of shadcn/ui, Tailwind CSS, and Next.js. It provides ready-to-use marketing sections, landing pages, and illustrations designed for quick copying and pasting into web projects. The library supports multiple aesthetic styles and integrates with Radix UI and Base UI.
An in-depth technical article analyzing the architectural layers and design patterns behind the shadcn/ui component library. It explores how headless UI primitives, Tailwind CSS, Class Variance Authority (CVA), and utility functions combine to separate structure from visual presentation.
Thinking Orbs is an open-source UI component library providing animated orb visualizers for various AI agent states. It includes six distinct animation styles optimized for light and dark modes with zero external dependencies. It is available as the npm package thinking-orbs.
tweakcn is an open-source, browser-based theme builder tailored for shadcn/ui and Tailwind CSS. It lets developers visually modify color palettes, typography, spacing, border radiuses, and shadows against an interactive component dashboard preview. Once styled, it exports production-ready CSS variables in OKLCH or HSL formats with support for Tailwind CSS v4 and v3.
Tweeq is an interaction design research project and widget library (tweeqjs) presented at UIST 2025 by Baku Hashimoto and Jun Kato. It provides fine-grained, direct-manipulation controls such as drag-to-tweak sliders, angle dials, and coordinate steppers tailored for creative software. It is particularly useful as a reference for designing responsive, tactile parameter interfaces.
A curated reference list compiling 27 distinct block and component libraries built around the shadcn/ui ecosystem. It covers both well-known and niche collections ranging from motion-heavy libraries like Aceternity and Magic UI to specialized tools like Tremor and Origin UI. It serves as a quick lookup index for frontend developers wanting pre-built components beyond default templates.
useLayouts is an open-source library of animated React components designed for quick copy-pasting. It combines Tailwind CSS and Framer Motion to provide micro-interactions, layout blocks, and navigation elements. Developers can preview components in the browser and adapt the unbundled code directly in their projects.
VantaUI is a UI component and template library modelled after production-grade SaaS products. It provides responsive site templates, app templates, blocks, interactive components, and Figma files built with Next.js, React, Tailwind CSS, and Framer Motion. It also includes an MCP server so AI coding agents can search and drop components directly into projects.
Vengeance UI is an open-source React component collection built with Tailwind CSS and Framer Motion. It provides pre-built, high-motion elements like displacement hover effects, animated tooltips, and scroll-driven cards. Developers can install individual components directly into their Next.js or React projects via the shadcn CLI.
voice-glow is a UI component library for React and SwiftUI that creates an animated, sound-reactive aurora glow rising along the bottom of an input container or screen. It includes presets for chat bars, mobile screens, and recording pills, responding to microphone input or custom audio levels without external runtime dependencies.