awesome-ui-resources
🌟 Modern UI & Design Resources Hub
A beautifully organized collection of modern UI resources, thoughtfully categorized for better discovery and usability.
📑 Table of Contents
- 🌟 Modern UI \& Design Resources Hub
- 📑 Table of Contents
- 🎨 UI Libraries \& Components
- 🚀 Animation \& Interaction
- 🎨 Design Systems
- 🌈 Color \& Styling Tools
- 📚 Learning \& Documentation
- 🛠 Development Tools
- ✨ Icons \& Assets
- 🌐 Community Resources
- 📍 Specialized \& Domain-Specific UI
- 🧪 Experimental \& Cutting Edge
- 📊 Data Visualization
- 🤖 AI-Powered Tools
- 📱 Mobile-First UI
- 🖥️ Backend \& Full-Stack Tools
- 🛠️ Project Scaffolding \& Starters
- 🔧 Contribution Guide
🎨 UI Libraries & Components
Modern UI component libraries and kits for building beautiful interfaces.
| Preview | Name | Description | Link |
|---|---|---|---|
 |
Aceternity UI | Beautiful, modern UI templates and components | Visit |
 |
21st UI | Elegant components with a minimal aesthetic | Visit |
 |
Starwind UI | UI templates and kits for modern interfaces | Visit |
 |
Smooth UI | Clean, React-based UI components | Visit |
 |
Reverse UI | Interactive Tailwind components and patterns | Visit |
 |
Hero UI | Tailwind-friendly UI components | Visit |
 |
Origin UI | Customizable components with a pragmatic structure | Visit |
 |
Easy UI | Responsive React component library | Visit |
 |
DaisyUI | Tailwind CSS components with built-in themes | Visit |
 |
Hyper UI | Free Tailwind component snippets and patterns | Visit |
 |
Ripple UI | Lightweight Tailwind components | Visit |
 |
MVP Blocks | Prebuilt UI blocks for fast MVP shipping | Visit |
 |
SHSF UI | Motion-first UI library with fine detail | Visit |
 |
Skiper UI | Components tailored for modern websites | Visit |
 |
Kibo UI | Tools for building responsive websites quickly | Visit |
 |
Spectrum UI | Copy-paste UI components for instant use | Visit |
 |
Sera UI | Simple toolkit for building beautiful websites | Visit |
 |
Kokonut UI | 100+ Tailwind and shadcn components for React and Next.js | Visit |
 |
Stunning UI | Tailwind components for Vue and Nuxt | Visit |
 |
Nur UI | Modern React and Next.js UI with CLI scaffolding | Visit |
 |
ScrollX UI | Animated, handcrafted UI components | Visit |
 |
REUI | Open-source animated components built for shadcn | Visit |
 |
Tailark UI | Shadcn UI blocks for marketing websites | Visit |
 |
Cult UI | Shadcn-compatible blocks and Next.js templates | Visit |
 |
Flyon UI | Tailwind CSS components with semantic classes | Visit |
 |
Flowbite | Components built on top of Tailwind CSS | Visit |
 |
Preline UI | Tailwind-crafted UI components and plugins | Visit |
 |
TailGrids | Tailwind components, blocks, and templates | Visit |
 |
Meraki UI | Ready-made Tailwind components | Visit |
 |
Mamba UI | Open-source Tailwind components and templates | Visit |
 |
Orion UI | Lightweight Vue UI framework | Visit |
 |
Basecoat UI | Tailwind-based components for multiple stacks | Visit |
 |
Kutty | Prebuilt Tailwind components and patterns | Visit |
 |
Myna UI | Tailwind and shadcn UI kit for Figma and React | Visit |
 |
Lina Adaptive Scroll Area | Adaptive scroll area component for modern UIs | Visit |
 |
React Wheel Picker | iOS-style wheel picker for React with smooth inertia | Visit |
 |
Cook UI | Ultra-modern bento UI built with Next.js and shadcn | Visit |
 |
E-commerce UI | UI library for e-commerce sites and marketplaces | Visit |
 |
Forge UI | Production-ready React and Tailwind UI components | Visit |
 |
Lightswind UI | Minimal and lightweight Tailwind component library | Visit |
 |
Nuxt UI | Full UI framework for Nuxt with 50+ components | Visit |
 |
Devsloka UI | Free Tailwind CSS components and blocks | Visit |
 |
Reka UI | Beautifully crafted Vue.js components | Visit |
 |
Intent UI | UI components and templates for React and Next.js | Visit |
 |
Buttony UI | Specialized collection of button components | Visit |
 |
Solace UI | Free animated components using Tailwind and Framer Motion | Visit |
 |
Efferd UI | Shadcn UI blocks built for busy developers | Visit |
 |
Dice UI | Accessible shadcn UI components with copy-paste support | Visit |
 |
Coss UI | Modern UI library built on top of Base UI | Visit |
 |
Joly UI | Modern React component library using Tailwind CSS | Visit |
 |
VengenceUI | A curated collection of beautifully crafted React components. | Visit |
 |
Hover UI | Animated UI components and templates for React, Tailwind CSS, Framer Motion and more. | Visit |
 |
Inspira UI | A free Vue component library built with TypeScript and Tailwind CSS. | Visit |
 |
PrimeVue UI | A complete, open-source UI component library for Vue.js with themes, icons, and accessibility. | Visit |
 |
Zen UI | An open-source library of free templates and UI components built for React applications. | Visit |
 |
The Gridcn | A Tron-inspired theme system for shadcn/ui with 50+ components, 6 Greek god color variants, and Three.js 3D effects. | Visit |
 |
UI TripleD | A library of animated UI components, blocks, and pages built on shadcn/ui and Motion. | Visit |
 |
Glitchcn | A cyberpunk/terminal-themed UI component library for React, built on shadcn/ui with copy-paste components. | Visit |
 |
Oat | An ultra-lightweight (~8KB), semantic UI library with zero dependencies. Styles native HTML elements directly, no classes required. | Visit |
 |
WarcraftCN | An open-source set of UI components inspired by classic Warcraft III RTS aesthetics. Copy-paste ready for any framework. | Visit |
 |
UI-Layouts | Beautifully designed sections you can copy and paste straight into your apps. Built for React and Next.js with Tailwind CSS and shadcn/ui. | Visit |
 |
SATIS UI | An ever-growing collection of production-grade React components with stunning animations, built on shadcn/ui, GSAP, and Motion. | Visit |
 |
Spell | A large collection of high-quality, copy-paste React components featuring text marquees, perspective books, shimmer text, and animated checkboxes. | Visit |
 |
Pixel Perfect UI | Build beautiful, responsive interfaces in minutes. A pixel-perfect React component library for modern web apps. | Visit |
 |
SCIFICN/UI | A retro sci-fi React component library built on Radix UI and Tailwind CSS. Features zero rounded corners, phosphor glow effects, and copy-paste components. | Visit |
 |
Shadcn Space | A platform offering 257+ Shadcn UI blocks, components, templates, and a Figma kit for React/Next.js apps. Free and pro options available. | Visit |
 |
Shadcn Studio | A unified platform offering 700+ Shadcn UI blocks, 10+ templates, 1000+ component variants, a Figma design system, and AI tools (theme generator, MCP, Figma-to-code). | Visit |
 |
Componentry | A free, open-source collection of 40+ animated React components built with Tailwind, TypeScript, and Framer Motion. Includes magnetic dock, matrix rain, particle typography, and more. | Visit |
 |
Shadcn UI Kit | A paid collection featuring 12 admin dashboards, 700+ components/blocks, website templates, and a theme generator. Built for shadcn/ui, Tailwind CSS, and React. | Visit |
 |
Svelte Bits | An open-source collection of animated, interactive, and fully customizable Svelte components. An official Svelte port of React Bits. | Visit |
 |
Iconiqui | An open‑source collection of interactive UI components and animated icons. Includes motion‑powered elements like hover flip cards and cursor effects, built with Motion and based on Lucide icons. | Visit |
 |
NeonBlade UI | A free, open-source React library for building futuristic interfaces with neon aesthetics, sharp edges, and full design control. | Visit |
 |
Shark UI | A multi‑framework component library with 90+ accessible components for React, Solid, Vue, and Svelte. Helps you build reusable, scalable design systems. | Visit |
🚀 Animation & Interaction
Libraries and tools for creating engaging animations and interactions.
| Preview | Name | Description | Link |
|---|---|---|---|
 |
Animate UI | Pre-built, animated UI components | Visit |
 |
Magic UI | Animations and micro-interactions for React | Visit |
 |
AnimeJS | All-in-one JavaScript animation engine | Visit |
 |
Motion Primitives | Motion-first primitives and kit for interfaces | Visit |
 |
Tailwind CSS Animations | Community-powered Tailwind animation plugin/docs | Visit |
 |
Widget UI | The first ever collection of Widgets for the Web. | Visit |
 |
Motion | The official website for Motion One, a modern, performant animation library for the web. | Visit |
 |
SVG Studio | A free, browser-based animation editor for creating keyframe animations on SVGs. Export self-contained animated SVGs with no runtime dependencies. | Visit |
 |
Remocn | A copy‑paste component registry for Remotion that provides 64+ production‑ready motion components. Includes text animations, transitions, UI blocks, and full scene compositions for building cinematic videos with React. | Visit |
🎨 Design Systems
Comprehensive design systems and foundational UI frameworks.
| Preview | Name | Description | Link |
|---|---|---|---|
 |
Headless UI | Unstyled, accessible primitives for React/Vue | Visit |
 |
Base Web | Uber’s design system and component library | Visit |
 |
Radix UI | Unstyled, accessible primitives for building systems | Visit |
 |
Ant Design | Enterprise-grade React UI system | Visit |
 |
ShadCN UI | Tailwind + Radix based components and blocks | Visit |
 |
CoreUI | Admin dashboard components and templates | Visit |
 |
Reshaped | Professional design system for React with customizable components and Figma integration | Visit |
 |
Radix Vue | Unstyled, accessible components for Vue.js design systems | Visit |
 |
ZagJS | A framework-agnostic, headless UI library powered by finite state machines. Provides unstyled, accessible component logic for React, Vue, Solid, and Svelte. | Visit |
 |
Chakra UI | A simple, modular, and accessible React component library that provides the building blocks for creating high-quality web apps and design systems. | Visit |
 |
Park UI | A beautifully designed, framework-agnostic component library built on Ark UI and Panda CSS. Supports React, Solid, and Vue with gorgeous defaults. | Visit |
 |
Bits UI | A collection of headless, unstyled component primitives for Svelte. Gives you full control over markup and styles while providing built-in accessibility for building robust design systems. | Visit |
 |
Skeleton UI | An adaptive design system for Tailwind CSS. Offers turnkey components for Svelte and React, plus a theme system, design tokens, CSS utilities, and integrated dark mode. | Visit |
🌈 Color & Styling Tools
Tools for creating beautiful color palettes and styling systems.
| Preview | Name | Description | Link |
|---|---|---|---|
 |
UI Colors | Generate Tailwind color palettes and tones | Visit |
 |
ShadcnThemes | Randomise and tailor shadcn themes | Visit |
 |
Tweakcn | Theme and style tools for shadcn/ui | Visit |
 |
SWEEP | A tool to craft and customize mesmerizing gradient backgrounds with full color control. | Visit |
📚 Learning & Documentation
Educational resources, blogs, and documentation for UI design.
| Name | Description | Link |
|---|---|---|
| ReactBits | Patterns and practices for React UI | Visit |
| Paul Lloyd’s Blog | Design systems and digital design | Visit |
| Chánh Đại | Articles on development, design, and ideas | Visit |
| Modern React UI Libraries | Blog on modern component kits | Read |
| Components Work | A directory of components and patterns | Visit |
| UiOrbit | Hub to discover and compare frontend UI libraries | Visit |
| Shadcn/ui Cheatsheet | Quick reference guide for shadcn/ui components and usage | Visit |
| AllShadcn | A curated directory of 300+ Shadcn templates, components, blocks, and tools | Visit |
| Shoogle | A focused, community-driven search engine for shadcn/ui. Discover blocks, components, and UI patterns across multiple registries. | Visit |
🛠 Development Tools
Tools and utilities to enhance your development workflow.
| Preview | Name | Description | Link |
|---|---|---|---|
 |
Shadcn Forms | Build forms quickly with shadcn + react-hook-form + zod | Visit |
 |
Shadcn Tiptap | Custom extensions and toolbars for the Tiptap editor | Visit |
 |
shadcn-prose | Typographic plugin designed for shadcn/ui | Visit |
 |
Spaceman RTA | Theme switching with smooth view transitions | NPM / Visit |
 |
FormSCN | A visual drag-and-drop form builder designed exclusively for shadcn/ui, supporting React Hook Form and TanStack Form. | Visit |
 |
VibeUI | A library of UI prompts for vibe coders. Offers 92 copy-paste prompts across 15 categories for AI-powered UI generation. | Visit |
 |
Vuzeno | A Vue component registry. Extends shadcn-vue with production-ready components built for Vue. | Visit |
✨ Icons & Assets
Collections of icons, SVGs, and design assets.
| Preview | Name | Description | Link |
|---|---|---|---|
 |
Lucide Icons | Open-source, consistent icon set | Visit |
 |
Pattern Craft | Beautiful backgrounds and patterns | Visit |
 |
SVGL | SVG logos library built with Sveltekit & Tailwind | Visit |
 |
AnimateIcons | Open-source library of animated icons with CSS, JS, and SVG implementations. Also a free React library of 281 animated icons built with Motion.dev. | Visit |
 |
Icona | Icon library for everyone. 200+ collections, 50,000+ icons with built-in SVG editor. | Visit |
 |
SoundCN | An open-source library of sound effects for modern web apps, installable via the shadcn CLI. | Visit |
 |
ShieldCN | A shields.io alternative that generates beautiful README badges using shadcn/ui styling. Offers 6 variants, 16 themes, and 30,000+ icons. | Visit |
🌐 Community Resources
Community-driven projects and collaborative resources.
| Preview | Name | Description | Link |
|---|---|---|---|
 |
UIverse | Community-made CSS/React/Tailwind components | Visit |
 |
Vue Bits | Animated Vue components and bits | Visit |
📍 Specialized & Domain-Specific UI
Libraries and components built for specific application domains (maps, admin panels, terminal UIs, PDFs, etc.).
| Preview | Name | Description | Link |
|---|---|---|---|
 |
Table Forge | Ready-to-use, accessible table components built with Next.js and Tailwind CSS. | Visit |
 |
TableCraft | A production-ready, type-safe React table engine with virtualized rendering for 100k+ rows. | Visit |
 |
PDFx | A copy-paste React component library for building professional PDFs, built on @react-pdf/renderer. | Visit |
 |
TermCN | A React component library for building modern, interactive terminal UIs. Built on Ink, with 100+ shadcn/ui-style components. | Visit |
 |
Shadcn Admin Kit | An open‑source component kit for building B2B apps, admin panels, and dashboards. Includes CRUD, data tables, forms, auth, i18n. | Visit |
 |
Terrae | Declarative, composable map components for React. Replace imperative layers with simple props. | Visit |
 |
Mapcn | A collection of beautiful, customizable React map components built with Tailwind CSS. | Visit |
 |
OpenTUI | A high-performance, framework-agnostic engine for building terminal UIs (TUIs). Features a native Zig core, first-class React & Solid bindings, and pre-built components. | Visit |
 |
Dotmatrix | A collection of 55+ free and open-source loading animations. Built with React, TypeScript, Tailwind CSS, and shadcn. | Visit |
 |
Teul | An opinionated 12‑column grid system for React and Tailwind. Provides Grid and GridItem components with type‑safe responsive props. No runtime, no dependencies, copy‑paste install via shadcn CLI. | Visit |
🧪 Experimental & Cutting Edge
Innovative and forward-thinking UI projects.
| Preview | Name | Description | Link |
|---|---|---|---|
 |
V0 | Turn prompts into web apps with v0 platform | Visit |
📊 Data Visualization
Tools and libraries for creating beautiful data visualizations (charts, graphs).
| Preview | Name | Description | Link |
|---|---|---|---|
 |
Evil Charts | Animated chart UI built with shadcn & recharts | Visit |
 |
Bklit UI | An open‑source collection of composable chart components for React. Built on shadcn/ui, offers line, area, bar, radar, funnel, Sankey, and many more chart types. | Visit |
🤖 AI-Powered Tools
UI tools and components enhanced with artificial intelligence.
| Preview | Name | Description | Link |
|---|---|---|---|
 |
AI Elements | Component registry for AI-native UI on shadcn/ui | Visit |
 |
Tool-UI | Beautiful, responsive components specifically designed for building AI tools. Built on Tailwind, Radix, and shadcn/ui. | Visit |
 |
ElevenLabs UI | Open-source component library for building voice and conversational AI agents, featuring audio visualizers and chat interfaces. | Visit |
 |
TypeUI | An open-source CLI and registry that gives AI agents (Cursor, Claude Code, Codex) a structured design system to follow. | Visit |
 |
Blocks | AI tool that generates website blocks, pages, and entire sites from prompts. | Visit |
📱 Mobile-First UI
UI libraries and components designed for mobile experiences.
| Preview | Name | Description | Link |
|---|---|---|---|
 |
CrossBuild UI | React Native UI components optimized for Expo | Visit |
 |
NativeWind | A universal styling system that uses Tailwind CSS as a scripting language to style React Native applications, providing a consistent utility-first workflow across iOS, Android, and web. | Visit |
🖥️ Backend & Full-Stack Tools
Tools for backend and full-stack development.
| Preview | Name | Description | Link |
|---|---|---|---|
 |
ServerCN | A component registry for building Node.js backends by composition. Inspired by shadcn/ui, it standardizes backend patterns to eliminate boilerplate. | Visit |
 |
Pushduck | A type-safe, universal file upload library with zero vendor lock-in. Includes a CLI for seamless setup, supports any S3 provider, and works across 16+ frameworks (Next.js, Hono, Express, Cloudflare Workers, etc.). | Visit |
🛠️ Project Scaffolding & Starters
CLI tools and starters for bootstrapping full projects.
| Preview | Name | Description | Link |
|---|---|---|---|
 |
Better Fullstack | A CLI that scaffolds production-ready apps with your preferred tech stack. Choose from 270+ options across 4 ecosystems. | Visit |
🔧 Contribution Guide
We welcome contributions to make this resource list even more valuable!
How to contribute:
- Fork the repository
- Add your resource to the appropriate category
- Include a 120px wide preview image in the
images/folder - Use the format:
```html |
| Name | Description | Visit | - Submit a pull request with a brief description of your addition
Screenshot guidelines:
- Ideal size: 1200x630 pixels for nice previews
- Save to the
images/folder with a descriptive filename - Use the HTML image tag format shown in the tables
Maintained with ❤️ by Al-Hussein