Awesome UI Components

       

A curated list of awesome UI component libraries, frameworks, kits, and resources for building beautiful, reusable user interfaces.

Contents

• Component Libraries
• Design Systems
• Headless UI
• Accessibility-Focused Components
• Animation & Motion
• Icon Sets
• Themes & Skins
• Component Showcases & Tools
• Articles & Guides
• Related Lists

Component Libraries

• Radix UI – Unstyled, accessible components for building high-quality design systems and web apps.
• ShadCN UI – Beautifully styled components built with Radix and Tailwind CSS.
• Material UI (MUI) – React components that implement Google's Material Design.
• Chakra UI – Simple, modular, accessible React components.
• Ant Design – A comprehensive enterprise-level UI design language and React component library.
• Bootstrap – The world’s most popular framework for building responsive, mobile-first websites.
• Tailwind UI – Official UI components built with Tailwind CSS (paid).
• Vuetify – Material Design UI library for Vue.js.
• Quasar – High-performance Material Design 2 UI for Vue 3.

Design Systems

• Carbon Design System – IBM’s open-source design system.
• Fluent UI – Microsoft’s official UI framework for building web apps.
• Shopify Polaris – Shopify's design system for internal and external apps.
• Lightning Design System – Salesforce’s UI framework and design system.

Headless UI

• Headless UI – Completely unstyled, fully accessible UI components (by Tailwind Labs).
• Ark UI – A headless library built on top of state machines, accessible by default.
• React Aria – Adobe’s set of accessible UI primitives for building design systems.

Accessibility-Focused Components

• Reach UI – Accessible UI primitives for React.
• React A11y Dialog – A React component wrapping the a11y-dialog library.
• Accessible Rich Internet Applications (WAI-ARIA) – Guidelines and best practices for accessibility.

Animation & Motion

• Framer Motion – An animation library for React components.
• React Spring – A spring-physics-based animation library for React.
• Lottie – Render After Effects animations natively on the web and mobile.

Icon Sets

• Lucide – Beautiful & consistent icon toolkit (a fork of Feather icons).
• Heroicons – Hand-crafted icons by the creators of Tailwind CSS.
• Font Awesome – The web’s most popular icon set and toolkit.
• Remix Icon – Open-source set of carefully crafted system icons.
• Tabler Icons – A set of over 4,000 customizable SVG icons.

Themes & Skins

• DaisyUI – Tailwind CSS component library with theming support.
• Theme UI – Build consistent, themeable React apps based on design constraints.
• Styled System – Style props for rapid UI development.

Component Showcases & Tools

• Storybook – Develop, test, and document UI components in isolation.
• Bit – Build and share reusable components across projects.
• Backlight – Design system platform for documenting and collaborating on UI components.
• React Styleguidist – Isolated React component development environment.

Articles & Guides

• Building Accessible React Components – Smashing Magazine.
• Component Design Patterns – Learn advanced patterns for reusable components.
• How to Choose a Component Library

Related Lists

• Awesome Design
• Awesome Tailwind CSS
• Awesome Icons
• Awesome UX
• Awesome Figma

Contribute

Contributions are welcome!

License