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.
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.
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
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
| 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 |
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
Use references/patterns.md for ready-to-use design patterns: card grids, dark themes, KPI displays, status indicators, table styles, and color scheme references.