admin/GLM-Tools-Skills-Agents
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
cc60c8bdb4f6c5da3817f4b4996e1f55c790a81b
GLM-Tools-Skills-Agents/frontend-ui-ux-design/component-libraries/README.md
uroma cc60c8bdb4 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
2026-02-13 11:26:26 +00:00

218 lines
7.6 KiB
Markdown
Raw Blame 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
```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 View Git Blame Copy Permalink