awesome-ui-resources

🌟 Modern UI & Design Resources Hub

A beautifully organized collections of modern UI resources, thoughtfully categorized for better discovery and usability.

πŸ“‘ Table of Contents

🎨 UI Libraries & Components

Modern UI component libraries and kits for building beautiful interfaces

Preview Name Description Link
Aceternity UI Aceternity UI Beautiful, modern UI templates and components Visit
21st UI 21st UI Elegant components with a minimal aesthetic Visit
Starwind UI Starwind UI UI templates and kits for modern interfaces Visit
Smooth UI Smooth UI Clean, React-based UI components Visit
Reverse UI Reverse UI Interactive Tailwind components and patterns Visit
Hero UI Hero UI Tailwind-friendly UI components Visit
Origin UI Origin UI Customizable components with a pragmatic structure Visit
Easy UI Easy UI Responsive React component library Visit
DaisyUI DaisyUI Tailwind CSS components with built-in themes Visit
Hyper UI Hyper UI Free Tailwind component snippets and patterns Visit
Ripple UI Ripple UI Lightweight Tailwind components Visit
MVP Blocks MVP Blocks Prebuilt UI blocks for fast MVP shipping Visit
SHSF UI SHSF UI Motion-first UI library with fine detail Visit
Skiper UI Skiper UI Components tailored for modern websites Visit
Kibo UI Kibo UI Tools for building responsive websites quickly Visit
Spectrum UI Spectrum UI Copy-paste UI components for instant use Visit
Sera UI Sera UI Simple toolkit for building beautiful websites Visit
Kokonut UI Kokonut UI 100+ Tailwind and shadcn components for React and Next.js Visit
Stunning UI Stunning UI Tailwind components for Vue and Nuxt Visit
Nur UI Nur UI Modern React and Next.js UI with CLI scaffolding Visit
ScrollX UI ScrollX UI Animated, handcrafted UI components Visit
REUI REUI Open-source animated components built for shadcn Visit
Tailark UI Tailark UI Shadcn UI blocks for marketing websites Visit
Cult UI Cult UI Shadcn-compatible blocks and Next.js templates Visit
Flyon UI Flyon UI Tailwind CSS components with semantic classes Visit
Flowbite Flowbite Components built on top of Tailwind CSS Visit
Preline UI Preline UI Tailwind-crafted UI components and plugins Visit
TailGrids TailGrids Tailwind components, blocks, and templates Visit
Meraki UI Meraki UI Ready-made Tailwind components Visit
Mamba UI Mamba UI Open-source Tailwind components and templates Visit
Orion UI Orion UI Lightweight Vue UI framework Visit
Basecoat UI Basecoat UI Tailwind-based components for multiple stacks Visit
Kutty Kutty Prebuilt Tailwind components and patterns Visit
Myna UI Myna UI Tailwind and shadcn UI kit for Figma and React Visit
Lina Adaptive Scroll Area Lina Adaptive Scroll Area Adaptive scroll area component for modern UIs Visit
React Wheel Picker React Wheel Picker iOS-style wheel picker for React with smooth inertia Visit
Cook UI Cook UI Ultra-modern bento UI built with Next.js and shadcn Visit
E-commerce UI E-commerce UI UI library for e-commerce sites and marketplaces Visit
Forge UI Forge UI Production-ready React and Tailwind UI components Visit
Lightswind UI Lightswind UI Minimal and lightweight Tailwind component library Visit
Nuxt UI Nuxt UI Full UI framework for Nuxt with 50+ components Visit
Devsloka UI Devsloka UI Free Tailwind CSS components and blocks Visit
Reka UI Reka UI Beautifully crafted Vue.js components Visit
Intent UI Intent UI UI components and templates for React and Next.js Visit
Buttony UI Buttony UI Specialized collection of button components Visit
Solace UI Solace UI Free animated components using Tailwind and Framer Motion Visit
Efferd UI Efferd UI Shadcn UI blocks built for busy developers Visit
Dice UI Dice UI Accessible shadcn UI components with copy-paste support Visit
Coss UI Coss UI Modern UI library built on top of Base UI Visit
Joly UI Joly UI Modern React component library using Tailwind CSS Visit
VengenceUI VengenceUI A curated collection of beautifully crafted React components. Visit
Hover UI Hover UI Animated UI components and templates for React,Tailwind CSS Framer Motion and more. Visit
Inspira UI Inspira UI A free Vue component library built with TypeScript and Tailwind CSS, focused on developer experience. Visit
Primevue UI PrimeVue UI A complete, open-source UI component library for Vue.js with themes, icons, and accessibility. Visit
Zen UI Zen UI An open-source library of free templates and UI components built for React applications Visit
The Gridcn 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 UI TripleD A library of animated UI components, blocks, and pages built on shadcn/ui and Motion. Visit
Glitchcn Glitchcn A cyberpunk/terminal-themed UI component library for React, built on shadcn/ui with copy-paste components. Visit
Shadcnblocks Shadcn Blocks A premium library of 1351+ blocks, 1189+ components, and 12 templates for shadcn/ui, Tailwind, and React. Visit
oat Oat An ultra-lightweight (~8KB), semantic UI library with zero dependencies. Styles native HTML elements directly, no classes required. Visit
WarcraftCN WarcraftCN An open-source set of UI components inspired by classic Warcraft III RTS aesthetics. Copy-paste ready for any framework. Visit
UI-Layouts UI-Layouts Beautifully designed sections you can copy and paste straight into your apps. Creatively crafted with Tailwind CSS and shadcn/ui, these blocks are built for real-world React and Next.js projects Visit
SATIS UI SATIS UI An ever-growing collection of production-grade React components with stunning animations, built on shadcn/ui, GSAP, and Motion. Visit
Spell Spell A large collection of high-quality, copy-paste React components featuring text marquees, perspective books, shimmer text, and animated checkboxes. Visit

πŸš€ Animation & Interaction

Libraries and tools for creating engaging animations and interactions

Preview Name Description Link
Animate UI Animate UI Pre-built, animated UI components Visit
Magic UI Magic UI Animations and micro-interactions for React Visit
AnimeJS AnimeJS All-in-one JavaScript animation engine Visit
Motion Primitives Motion Primitives Motion-first primitives and kit for interfaces Visit
Tailwind CSS Animations Tailwind CSS Animations Community-powered Tailwind animation plugin/docs Visit
Widget UI Widget UI The first ever collection of Widgets for the Web. Visit
Blocks Blocks Clean, modern building blocks. Copy and paste into your apps. Visit
motion Motion The official website for Motion One, a modern, performant animation library for the web. Visit
SVG Studio SVG Studio A free, browser-based animation editor for creating keyframe animations on SVGs. Export self-contained animated SVGs with no runtime dependencies. Visit

🎨 Design Systems

Comprehensive design systems and foundational UI frameworks

Preview Name Description Link
Headless UI Headless UI Unstyled, accessible primitives for React/Vue Visit
Base Web Base Web Uber’s design system and component library Visit
Radix UI Radix UI Unstyled, accessible primitives for building systems Visit
Ant Design Ant Design Enterprise-grade React UI system Visit
ShadCN UI ShadCN UI Tailwind + Radix based components and blocks Visit
CoreUI CoreUI Admin dashboard components and templates Visit
CoreUI Reshaped Professional design system for React with customizable components and Figma integration Visit
Radix Vue Radix Vue Unstyled, accessible components for Vue.js design systems Visit

🌈 Color & Styling Tools

Tools for creating beautiful color palettes and styling systems

Preview Name Description Link
UI Colors UI Colors Generate Tailwind color palettes and tones Visit
ShadcnThemes ShadcnThemes Randomise and tailor shadcn themes Visit
Tweakcn Tweakcn Theme and style tools for shadcn/ui Visit
SWEEP 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 to help you discover resources for your next project. Visit

πŸ›  Development Tools

Tools and utilities to enhance your development workflow

Preview Name Description Link
Shadcn Forms Shadcn Forms Build forms quickly with shadcn + react-hook-form + zod Visit
Shadcn Tiptap Shadcn Tiptap Custom extensions and toolbars for the Tiptap editor Visit
shadcn-prose shadcn-prose Typographic plugin designed for shadcn/ui Visit
Spaceman RTA Spaceman RTA Theme switching with smooth view transitions NPM / Visit
FormSCN FormSCN A visual drag-and-drop form builder designed exclusively for shadcn/ui, supporting React Hook Form and TanStack Form. Visit

✨ Icons & Assets

Collections of icons, SVGs, and design assets

Preview Name Description Link
Lucide Lucide Icons Open-source, consistent icon set Visit
Pattern Craft Pattern Craft Beautiful backgrounds and patterns Visit
SVGL SVGL SVG logos library built with Sveltekit & Tailwind Visit
icons Animate Icons Open-source library of animated icons with CSS, JS, and SVG implementations. Visit
icons Icona Icon library for everyone. Visit

🌐 Community Resources

Community-driven projects and collaborative resources

Preview Name Description Link
UIverse UIverse Community-made CSS/React/Tailwind components Visit
Vue Bits Vue Bits Animated Vue components and bits Visit

πŸ“ Specialized & Domain-Specific UI

Libraries and components built for specific application domains (like maps, charts, or e-commerce).

Preview Name Description Link
Table Forge Table Forge Ready-to-use, accessible table components built with Next.js and Tailwind CSS. Browse examples, preview variations, and copy the JSX in one click. Visit
TableCraft TableCraft A production-ready, type-safe React table engine with virtualized rendering for 100k+ rows, advanced filtering, and full TypeScript support. Visit
PDFx PDFx A copy-paste React component library for building professional PDFs, built on @react-pdf/renderer with 24 components and theme support. Visit

πŸ§ͺ Experimental & Cutting Edge

Innovative and forward-thinking UI projects

Preview Name Description Link
V0 V0 Turn prompts into web apps with v0 platform Visit

πŸ“Š Data Visualization

Tools and libraries for creating beautiful data visualizations

Preview Name Description Link
Evil Charts Evil Charts Animated chart UI built with shadcn & recharts Visit
Terrae Terrae Components, not layers Declarative, composable map components that replace imperative layers with simple props. The perfect companion for React. Visit
Map CN Mapcn A collection of beautiful, customizable React map components built with Tailwind CSS. Visit

πŸ€– AI-Powered Tools

UI tools and components enhanced with artificial intelligence

Preview Name Description Link
AI Elements AI Elements Component registry for AI-native UI on shadcn/ui Visit
Tool-UI Tool-UI Beautiful, responsive components specifically designed for building AI tools. Built on Tailwind, Radix, and shadcn/ui. Visit
ElevenLabs UI ElevenLabs UI Open-source component library for building voice and conversational AI agents, featuring audio visualizers and chat interfaces. Visit

πŸ“± Mobile-First UI

UI libraries and components designed for mobile experiences

Preview Name Description Link
CrossBuild UI CrossBuild UI React Native UI components optimized for Expo Visit

πŸ–₯️ Backend & Full-Stack Tools

Preview Name Description Link
ServerCN ServerCN A component registry for building Node.js backends by composition. Inspired by shadcn/ui, it standardizes backend patterns to eliminate boilerplate. Visit

πŸ› οΈ Project Scaffolding & Starters

Preview Name Description Link
Better Fullstack Better Fullstack A CLI that scaffolds production-ready apps with your preferred tech stack. Choose from 270+ options across 4 ecosystems, frameworks, databases, auth, payments, AI, and more. Visit

πŸ”§ Contribution Guide

We welcome contributions to make this resource list even more valuable!

How to contribute:

  1. Fork the repository
  2. Add your resource to the appropriate category
  3. Include a 120px wide preview image in the images/ folder
  4. Use the format: 
    | <img src="images/filename.png" width="120" alt="Description"/> | Name | Description | [Visit](link) |
  5. Submit a pull request with a brief description of your addition

Screenshot guidelines:

Maintained with ❀️ by Al-Hussein

This site is open source. Improve this page.