Uiverse Design — UI Component Design Library
165 curated open-source UI components from Uiverse Galaxy (MIT license). Each component is a self-contained HTML file with inline CSS or Tailwind classes, ready to copy into any project.
About This Skill
This skill ships with a curated subset (165 components, ~15 per category).
The full Uiverse Galaxy repository contains 3800+ components. If the user wants access to the complete library, they can run the included setup script to download it from GitHub:
bash <skill-dir>/scripts/setup.sh
> Note: The setup script downloads external content from GitHub at runtime. The downloaded content is not reviewed as part of this skill and may change over time. Users should review the script source before running it. Use --proxy if a network proxy is needed.
After download completes, the full library replaces the curated subset automatically.
Component Categories
assets/galaxy/
├── Buttons/ — CTA, icon, animated, hover effects
├── Cards/ — Info cards, 3D effects, data display
├── loaders/ — Spinners, progress bars, skeletons
├── Inputs/ — Text, search, floating labels
├── Toggle-switches/ — On/off, multi-state, themed
├── Forms/ — Login, signup, contact, search
├── Checkboxes/ — Custom styled, animated
├── Patterns/ — Backgrounds, gradients, textures
├── Radio-buttons/ — Custom styled, animated
├── Tooltips/ — Hover, click, positioned
└── Notifications/ — Toast, alert, badge
Search Components
bash <skill-dir>/scripts/search.sh <category> [keyword] [--tailwind|--css]
bash <skill-dir>/scripts/search.sh --all [keyword] # Search all categories
bash <skill-dir>/scripts/search.sh --sample <category> # Random samples for inspiration
bash <skill-dir>/scripts/search.sh --stats # Show statistics
bash <skill-dir>/scripts/search.sh --tags # Popular tags
Design Learning Workflow
Step 1: Identify Page Type → Choose Components
| Page Type | Focus On | Key Components |
|---|---|---|
| Dashboard | Card grids, data display, loading states | Cards, Loaders, Notifications |
| Admin Panel | Tables, forms, action buttons | Forms, Buttons, Inputs, Checkboxes |
| Data Panel | KPI cards, chart placeholders, filters | Cards, Inputs, Radio-buttons |
| Settings Page | Toggles, forms, save buttons | Toggle-switches, Forms, Buttons |
| Landing Page | Eye-catching buttons, gradients, animations | Buttons, Patterns, Cards |
Step 2: Extract Design Patterns from Components
Each .html file is a design study. Focus on extracting:
Color System — Extract --primary, --bg, --accent variables
Spacing Rhythm — Observe padding, margin, gap values
Border Radius — 4px (sharp) → 12px (rounded) → 50px (pill)
Shadow Depth — box-shadow offset, blur, and color for layering
Animation — transition duration, transform changes, @keyframes
Typography — font-size, font-weight, letter-spacing combinations
Step 3: Combine into Complete Pages
Use references/patterns.md for ready-to-use design patterns: card grids, dark themes, KPI displays, status indicators, table styles, and color scheme references.
Component File Format
- CSS components (84%): Contain
<style>tag, self-contained - Tailwind components (11%): Use Tailwind utility classes
- Mixed components (5%): Both
<style>and Tailwind classes
Header comment identifies source and tags:
<!-- From Uiverse.io by author - Tags: tag1, tag2, tag3 -->
Common Tags
| Tag | Meaning | Use Case |
|---|---|---|
animated / animation |
Has animations | Attention, feedback |
hover / hover effect |
Hover interaction | Buttons, links, cards |
gradient |
Gradient colors | Backgrounds, buttons, accents |
minimalist |
Minimal style | Admin panels, professional products |
material design |
Material style | Android/Web universal |
dark / light&dark |
Dark theme | Dashboards, night mode |
modern / smooth |
Modern feel | New projects, product pages |
loading / loader |
Loading state | Data waiting, skeletons |
License
MIT license from Uiverse.io.
