Add Frontend/UI/UX/Design section with shadcn/ui
- 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
This commit is contained in:
uroma
217
frontend-ui-ux-design/component-libraries/README.md
Normal file
217
frontend-ui-ux-design/component-libraries/README.md
Normal file
@@ -0,0 +1,217 @@
|
||||
# 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
|
||||
```bash
|
||||
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
|
||||
```bash
|
||||
# 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*
|
||||
Reference in New Issue
Block a user