cc60c8bdb4
- Create dedicated frontend-ui-ux-design directory - Add component libraries reference (shadcn/ui, Radix, MUI, etc.) - Add design systems reference (Material, Carbon, Polaris) - Add CSS frameworks reference (Tailwind, Bootstrap, CSS-in-JS) - Add frontend stacks reference (React, Vue, Next.js, Svelte) - Add UI experts reference (MiniMax, GLM design agents) - Update README with prominent Frontend section - Include shadcn/ui quick start guide - Add recommended 2026 tech stack
cc60c8bdb4
·
2026-02-13 11:26:26 +00:00
History
UI Component Libraries
Comprehensive collection of UI component libraries for rapid frontend development.
🎯 Shadcn/UI (Primary Recommendation)
URL: https://ui.shadcn.com/ Stack: React, Next.js, Tailwind CSS License: MIT
Why Shadcn/UI
- Copy & Paste - Not a npm package, you own the code
- Radix UI Primitives - Accessible by default
- Tailwind CSS - Utility-first styling
- Customizable - Full control over components
- Beautiful Defaults - Modern, clean design
Installation
npx shadcn@latest init
Available Components (50+)
| Component | Description |
|---|---|
accordion |
Vertically stacked set of interactive headings |
alert |
Displays a callout for user attention |
alert-dialog |
Modal dialog that interrupts the user |
aspect-ratio |
Displays content within a desired ratio |
avatar |
Image element with a fallback |
badge |
Displays a badge or label |
breadcrumb |
Shows navigation path |
button |
Triggers an action or event |
calendar |
Date field component |
card |
Displays content in a card format |
carousel |
A carousel with motion and gestures |
chart |
Area, Bar, Line charts with Recharts |
checkbox |
Toggle for binary options |
collapsible |
Interactive component to show/hide content |
combobox |
Autocomplete input with a listbox |
command |
Command menu for searching actions |
context-menu |
Menu triggered by right-click |
data-table |
Table with sorting, filtering, pagination |
date-picker |
Date picker with range support |
dialog |
Modal dialog |
drawer |
A drawer that slides from edge |
dropdown-menu |
Menu activated by a trigger |
form |
Form building with react-hook-form |
hover-card |
Card that appears on hover |
input |
Text input field |
input-otp |
One-time password input |
label |
Label for form controls |
menubar |
Horizontal menu bar |
navigation-menu |
Collection of navigation links |
pagination |
Navigation between pages |
popover |
Floating content portal |
progress |
Progress indicator |
radio-group |
Set of checkable buttons |
resizable |
Resizable panel groups |
scroll-area |
Custom scrollbar container |
select |
Displays a list of options |
separator |
Visual divider |
sheet |
Extends the Dialog component |
sidebar |
Composable sidebar component |
skeleton |
Placeholder for loading content |
slider |
Input for selecting values |
sonner |
Toast notifications |
switch |
Toggle between states |
table |
Displays data in rows and columns |
tabs |
Set of layered sections |
textarea |
Multi-line text input |
toast |
Brief notifications |
toggle |
Two-state button |
toggle-group |
Group of toggle buttons |
tooltip |
Popup displaying info |
Usage Example
# Add specific components
npx shadcn@latest add button card dialog form input
# Add all components
npx shadcn@latest add --all
🎨 Alternative Component Libraries
React Ecosystem
| Library | URL | Description |
|---|---|---|
| Radix UI | https://radix-ui.com | Unstyled, accessible primitives (shadcn base) |
| MUI (Material UI) | https://mui.com | Google Material Design components |
| Chakra UI | https://chakra-ui.com | Simple, modular, accessible |
| Mantine | https://mantine.dev | Full-featured React components |
| Ant Design | https://ant.design | Enterprise-grade UI design |
| NextUI | https://nextui.org | Beautiful, fast, modern React UI |
| React Aria | https://react-spectrum.adobe.com/react-aria | Adobe accessible primitives |
| Headless UI | https://headlessui.com | Unstyled UI components (Tailwind Labs) |
| Park UI | https://park-ui.com | Multi-framework components |
| Ark UI | https://ark-ui.com | Headless components for JS frameworks |
Vue Ecosystem
| Library | URL | Description |
|---|---|---|
| Radix Vue | https://radix-vue.com | Vue port of Radix UI |
| PrimeVue | https://primevue.org | Comprehensive Vue UI library |
| Vuetify | https://vuetifyjs.com | Material Design for Vue |
| Naive UI | https://naiveui.com | Vue 3 component library |
| Element Plus | https://element-plus.org | Vue 3 UI framework |
| Quasar | https://quasar.dev | Vue.js framework for all platforms |
| Shadcn-vue | https://www.shadcn-vue.com | Vue port of shadcn/ui |
Svelte Ecosystem
| Library | URL | Description |
|---|---|---|
| Shadcn-svelte | https://www.shadcn-svelte.com | Svelte port of shadcn/ui |
| Skeleton | https://www.skeleton.dev | Svelte UI toolkit |
| Melt UI | https://melt-ui.com | Svelte component library |
| daisyUI | https://daisyui.com | Tailwind Components (works with Svelte) |
Angular Ecosystem
| Library | URL | Description |
|---|---|---|
| Angular Material | https://material.angular.io | Material Design for Angular |
| PrimeNG | https://primeng.org | Angular UI component library |
| NG-ZORRO | https://ng.ant.design | Ant Design for Angular |
📱 Mobile Component Libraries
React Native
| Library | URL | Description |
|---|---|---|
| NativeBase | https://nativebase.io | Universal component library |
| React Native Paper | https://callstack.github.io/react-native-paper | Material Design for RN |
| Tamagui | https://tamagui.dev | Universal UI kit |
| Gluestack UI | https://gluestack.io | Universal UI components |
| Shadcn/ui RN | https://github.com/mrzachnugent/react-native-shadcn-ui | RN port of shadcn |
Flutter
| Library | URL | Description |
|---|---|---|
| Material Design | Built-in | Google's Material Design |
| Cupertino | Built-in | iOS-style widgets |
| Flutter Animate | https://pub.dev/packages/flutter_animate | Animation library |
🧩 CSS Component Libraries (No JS)
| Library | URL | Description |
|---|---|---|
| daisyUI | https://daisyui.com | Tailwind CSS Components |
| Flowbite | https://flowbite.com | Tailwind CSS components |
| HyperUI | https://hyperui.dev | Free Tailwind components |
| Tailwind UI | https://tailwindui.com | Official Tailwind components |
| Preline UI | https://preline.co | Tailwind CSS components |
| Sailboat UI | https://sailboatui.com | Tailwind CSS component library |
| Pines UI | https://devdojo.com/pines | Alpine.js + Tailwind UI |
🎯 Selection Guide
Choose shadcn/ui when:
- Using React/Next.js with Tailwind CSS
- Want full code ownership
- Need accessible components
- Prefer copy-paste over npm packages
- Want beautiful defaults with customization
Choose MUI when:
- Need Material Design compliance
- Want comprehensive out-of-the-box components
- Building enterprise applications
- Need theming support
Choose Chakra UI when:
- Want simple, composable components
- Need built-in accessibility
- Prefer styled-system approach
- Building accessible applications quickly
Choose Mantine when:
- Need full-featured component library
- Want excellent TypeScript support
- Need hooks library included
- Building complex applications
Choose Radix UI when:
- Building custom design system
- Need maximum accessibility
- Want complete styling control
- Creating component library
🔗 Related Skills
- ui-ux-pro-max - Design intelligence for web/mobile
- zai-tooling-reference - Next.js, React, Tailwind patterns
- frontend-developer agent - UI implementation specialist
Last updated: 2026-02-13