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

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#

text

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

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 TypeFocus OnKey ComponentsDashboardCard grids, data display, loading statesCards, Loaders, NotificationsAdmin PanelTables, forms, action buttonsForms, Buttons, Inputs, CheckboxesData PanelKPI cards, chart placeholders, filtersCards, Inputs, Radio-buttonsSettings PageToggles, forms, save buttonsToggle-switches, Forms, ButtonsLanding PageEye-catching buttons, gradients, animationsButtons, 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:

html

<!-- From Uiverse.io by author - Tags: tag1, tag2, tag3 -->

Common Tags#

TagMeaningUse Caseanimated / animationHas animationsAttention, feedbackhover / hover effectHover interactionButtons, links, cardsgradientGradient colorsBackgrounds, buttons, accentsminimalistMinimal styleAdmin panels, professional productsmaterial designMaterial styleAndroid/Web universaldark / light&darkDark themeDashboards, night modemodern / smoothModern feelNew projects, product pagesloading / loaderLoading stateData waiting, skeletons

License#

MIT license from Uiverse.io.