Uiverse, a community library of UI elements

Uiverse, a community library of UI elements

Uiverse is a collection of individual interface elements submitted by a community: buttons, cards, loading indicators, toggles. Each element is a standalone snippet of markup with styles that you copy into your project. There is no package to install and no dependency to maintain, and everything is MIT licensed.

What this is, and what it is not

This distinction decides whether it is worth visiting at all, because the phrase "component library" misleads.

A component library gives you a coherent system: elements that match, shared theme variables, predictable behaviour, and one source of updates. Uiverse gives something else, namely a catalogue of independent visual ideas. Every element was written by a different person, in their own style, with nothing agreed against the rest.

The use case follows, and it is worth naming plainly. This is where you look for one striking element, not for the foundation of an interface. A button with unusual hover behaviour, a loading indicator with an interesting animation, a toggle with a smooth transition. Things a finished library would render dull, because libraries are deliberately conservative.

Conversely, building an entire interface from elements found here ends badly and predictably. Twenty elements from twenty authors means twenty naming conventions, differing spacing scales, and differing approaches to colour. Consistency then has to be enforced by hand, which is more work than writing those elements from scratch on your own system.

Between those two poles sits a third option worth knowing about before you start browsing. Sets like React Bits are also copied into a project rather than installed, but one team writes them in one convention, and the components arrive ready for React, in variants for TypeScript and for utility classes. The choice there is far narrower than here and the scope is narrower too, since that is also a decorative layer rather than forms and tables. In exchange, two elements taken from it will match each other.

Practical advice: treat this as a catalogue of inspiration that happens to ship code. Take individual things and adapt them to your system rather than adapting your system to them. The test is whether you can say why this particular element should look different from the rest of the interface. If the answer is "because it looks nicer that way", using what you already have usually turns out better.

Code quality and what to check before pasting

Since elements come from different people and pass no technical review, quality varies. A few things are worth checking every time, because they recur.

The first is hard coded values. An element looks right in its demonstration because it carries a fixed pixel width and a text size chosen for that one case. Pasted into your layout it stops fitting at a different label length or on a narrower screen. Swapping absolute values for relative ones is usually the first thing to do.

The second is class names. An element carrying a class named something like "button" or "card" will collide with what your project already has, and the symptom appears as a visual change somewhere else entirely. When copying, prefix the classes immediately or wrap them in a style module.

The third is animation complexity. Effects built on shadows, blurs, and filters look impressive and can cost real rendering work, particularly when the element repeats down a list. Animating transforms and opacity is cheap; animating most other properties is not.

The fourth is states the author may not have considered. An element demonstrated in one state often has no defined appearance for a disabled state, for keyboard focus, or for a dark theme. That is not a flaw in the submission but a consequence of its origin as a showpiece.

Fitting this into a Tailwind project

Most elements in this catalogue exist in two variants: as plain styles and as utility classes. The choice is not obvious and depends on how your project is built.

The plain styles variant is easier to take, since you copy a block of styles and you are done. It suits a single effect you do not intend to change, and animations built on keyframes, which have to be declared separately anyway.

The utility class variant fits a Tailwind CSS project without adding a separate stylesheet, but carries one trap. Community submissions were written at different times, so some use version 3 syntax that behaves differently or not at all in version 4. If a copied element does not look like its preview, that is the first thing to check.

There is a third route worth remembering on a larger project. Rather than pasting an element directly where you need it, extract it into your own component with a sensible name straight away. A copied snippet used in five places is five copies that will drift apart at the first fix, and extracting costs a minute at the moment you already have the code in front of you.

Accessibility, the essential caveat

This section is short and matters more than the rest, because it concerns something invisible in a preview.

Many elements in catalogues like this build controls from the wrong markup: a button made from a checkbox, a toggle from a label and a hidden input, a clickable card from a plain block. It looks and works with a mouse, and ceases to exist for somebody using a keyboard or a screen reader.

The second recurring problem is removing the focus outline because it "spoils the look". An element with no visible focus indicator is unusable without sight, and it is among the first things an accessibility audit surfaces.

The rule that settles this: take the appearance from here and write the structure yourself. Copy the styles but attach them to the right element, meaning a button on a button and a checkbox on a checkbox. It costs a few minutes and removes the problem entirely, because correct markup carries keyboard behaviour and screen reader description for free.

If you need ready made elements with that layer already solved, the right place is a behaviour library such as Headless UI or Radix UI, to which you add your own styling, possibly inspired by what you find in this catalogue.

Website

Website: uiverse.io

Mirror repository: github.com/uiverse-io/galaxy

It is worth knowing that the GitHub repository is a copy rather than the source. Elements are submitted through the site, and direct pull requests to the repository are ignored. That copy was last synchronised in September 2024, so the element count stated there is lower than on the site. If you want the current collection, browse it on the site and treat the repository as an archive.

The MIT licence means freedom to use it, commercially included, with no obligation to credit anyone. The maintainers do ask for voluntary attribution to the element's author and to the service itself, which for a single effect in a project costs one line of comment in the code.

Why Uiverse?

Two reasons are worth separating, since they lead to different ways of using it.

The first is saving time on something you would rather not write. A loading indicator with a smooth animation, or a toggle with a transition, is an hour of fiddling with styles, and here it is ready. For a single element in a project that is pure gain and nobody will stop to consider architecture.

The second, less obvious and in my view more valuable, is learning. Browsing other people's solutions to the same problem shows techniques hard to arrive at alone: ways of building shadows, layering gradients, animating pseudo elements instead of adding markup. Even if you do not take the element, you see how somebody did it.

Conversely, the reason that does not hold up is looking here for interface fundamentals. A form, a table, or a dialog need consistency and correct structure rather than a striking appearance, so the right place for those is an ordinary component library.

It is also fair to note that quality is uneven by nature. Submissions are moderated for whether they work and look right, not for markup structure, performance, or accessibility. That is not a criticism of the project, since that is its intent, but you need to know it before pasting anything into a product.

The problem with traditional UI libraries

Typical styling approaches have their drawbacks:

1. Full libraries (Bootstrap, Material UI)

   • Large bundle size
   • Difficult customization
   • Consistent but "generic" look

2. Paid Tailwind component sets

   • A one off or yearly fee per developer
   • Prices change often, so check them at the vendor
   • Costs add up across a team

3. Writing from scratch

   • Time-consuming
   • Requires CSS skills
   • Easy to create inconsistencies

The Uiverse solution

Uiverse offers the best of both worlds:

• Free - Everything under MIT license
• Zero dependencies - Pure CSS or Tailwind
• Customizable - The code is yours, change it as you want
• High quality - Reviewed by the community
• Huge selection - 7000+ elements

Uiverse vs alternatives

Two numbers in that table need a comment. Tailwind UI has been called Tailwind Plus since 2025 and carries two rates rather than one: $299 for a personal licence and $979 for a team licence covering up to twenty five people. Both are one time payments with no subscription, and both include future additions. The Uiverse element count comes from the site and grows every week, so treat it as the position in August 2026 rather than a fixed value.

Element categories

Buttons

The largest button collection on the internet:

<!-- Neon Button -->
<button class="btn-neon">
  <span>Hover me</span>
</button>

<style>
.btn-neon {
  padding: 1rem 2rem;
  font-size: 1rem;
  color: #fff;
  background: transparent;
  border: 2px solid #0ff;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 0 5px #0ff, 0 0 25px #0ff, 0 0 50px #0ff;
}

.btn-neon:hover {
  background: #0ff;
  color: #000;
  box-shadow: 0 0 5px #0ff, 0 0 25px #0ff, 0 0 50px #0ff, 0 0 100px #0ff;
}
</style>

Types of buttons available on Uiverse:

• Gradient buttons
• Neon/glow buttons
• 3D buttons
• Animated buttons
• Social media buttons
• Icon buttons
• Toggle buttons
• Group buttons

Loaders & Spinners

Hundreds of animated loaders:

<!-- Bouncing Dots Loader -->
<div class="loader">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

<style>
.loader {
  display: flex;
  gap: 8px;
}

.dot {
  width: 12px;
  height: 12px;
  background: #3b82f6;
  border-radius: 50%;
  animation: bounce 0.5s ease-in-out infinite;
}

.dot:nth-child(2) { animation-delay: 0.1s; }
.dot:nth-child(3) { animation-delay: 0.2s; }

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}
</style>

Types of loaders:

• Spinners (circular)
• Dots (bouncing, pulsing)
• Bars (loading bars)
• Text loaders
• Skeleton loaders
• Progress indicators
• Infinite loaders

Cards

Cards for content presentation:

<!-- Glassmorphism Card -->
<div class="glass-card">
  <h2>Card Title</h2>
  <p>Card description goes here</p>
</div>

<style>
.glass-card {
  padding: 2rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.glass-card h2 {
  margin: 0 0 1rem;
  color: #fff;
}

.glass-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
}
</style>

Types of cards:

• Profile cards
• Product cards
• Pricing cards
• Blog post cards
• Statistics cards
• Feature cards
• Team member cards
• Testimonial cards

Inputs & Forms

Form elements:

<!-- Floating Label Input -->
<div class="input-group">
  <input type="text" class="input" required>
  <label class="label">Username</label>
</div>

<style>
.input-group {
  position: relative;
}

.input {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.3s;
}

.input:focus {
  border-color: #3b82f6;
}

.label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
  transition: all 0.3s;
}

.input:focus + .label,
.input:valid + .label {
  top: 0;
  font-size: 12px;
  background: #fff;
  padding: 0 4px;
  color: #3b82f6;
}
</style>

Types of inputs:

• Text inputs
• Search inputs
• Password inputs
• Email inputs
• Textarea
• Select dropdowns
• File upload
• Date pickers

Checkboxes & Toggles

Custom checkboxes and switches:

<!-- Custom Checkbox -->
<label class="checkbox">
  <input type="checkbox">
  <span class="checkmark"></span>
  Accept terms
</label>

<style>
.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.checkbox input {
  display: none;
}

.checkmark {
  width: 24px;
  height: 24px;
  border: 2px solid #ddd;
  border-radius: 6px;
  position: relative;
  transition: all 0.2s;
}

.checkbox input:checked + .checkmark {
  background: #3b82f6;
  border-color: #3b82f6;
}

.checkbox input:checked + .checkmark::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
</style>

Other categories

• Modals - Modal windows and dialogs
• Tooltips - Hints and tips
• Navbars - Navigation bars
• Footers - Page footers
• Tabs - Tab components
• Accordions - Collapsible content
• Badges - Status badges
• Alerts - Notifications
• Breadcrumbs - Navigation paths
• Pagination - Page navigation

How to use Uiverse

Method 1: Copy-Paste (Simplest)

1. Go to uiverse.io
2. Browse or search for elements
3. Click on your chosen element
4. Click "Copy" (HTML or CSS)
5. Paste into your project

Method 2: Tailwind version

Many elements have a Tailwind version:

<!-- Uiverse Button - Tailwind version -->
<button class="px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-500
               text-white font-semibold rounded-lg shadow-lg
               hover:shadow-purple-500/50 hover:scale-105
               transition-all duration-300">
  Click me
</button>

Method 3: Figma integration

Uiverse offers Figma integration:

1. Install the Uiverse plugin for Figma
2. Browse elements directly in Figma
3. Insert them as components in your design

Creating and publishing

How to add your own element

1. Create an element at uiverse.io/create
2. Write the code HTML and CSS (or Tailwind)
3. Preview - see how it looks
4. Submit - send for review
5. Approval - once approved, it appears in the library

<!-- Example submission -->
<div class="my-awesome-card">
  <div class="card-icon">✨</div>
  <h3>Awesome Card</h3>
  <p>Created by @yourname</p>
</div>

<style>
.my-awesome-card {
  /* Your styles */
}
</style>

Guidelines for contributors

• Element must be original
• Code must be clean and readable
• Responsiveness is welcome
• Animations should be smooth
• Accessibility is important

Framework integration

React

// components/UiverseButton.tsx
import './uiverse-button.css'

export function UiverseButton({ children, onClick }) {
  return (
    <button className="uiverse-btn" onClick={onClick}>
      <span>{children}</span>
    </button>
  )
}

Vue

<template>
  <button class="uiverse-btn" @click="$emit('click')">
    <span><slot /></span>
  </button>
</template>

<style scoped>
@import './uiverse-button.css';
</style>

Next.js with Tailwind

// Directly use Tailwind classes from Uiverse
export function GlowButton({ children }) {
  return (
    <button className="
      relative px-8 py-4
      bg-gradient-to-r from-cyan-500 to-blue-500
      text-white font-bold rounded-xl
      shadow-[0_0_20px_rgba(6,182,212,0.5)]
      hover:shadow-[0_0_40px_rgba(6,182,212,0.8)]
      transition-all duration-300
    ">
      {children}
    </button>
  )
}

Tips & tricks

Color customization

Most Uiverse elements use CSS custom properties or direct values. You can easily change colors:

/* Original from Uiverse */
.btn {
  background: #3b82f6;
}

/* Your customization */
.btn {
  background: var(--primary-color, #3b82f6);
}

/* Usage */
:root {
  --primary-color: #8b5cf6; /* Your color */
}

Responsiveness

Add media queries to elements:

.card {
  padding: 2rem;
  width: 400px;
}

@media (max-width: 640px) {
  .card {
    padding: 1rem;
    width: 100%;
  }
}

Dark mode

Most elements can be easily adapted for dark mode:

/* Light mode */
.card {
  background: #fff;
  color: #333;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .card {
    background: #1f2937;
    color: #f3f4f6;
  }
}

/* Or with a class */
.dark .card {
  background: #1f2937;
  color: #f3f4f6;
}

FAQ - Frequently asked questions

Can I use elements commercially?

Yes! All elements are MIT licensed. You can use them in commercial projects without any restrictions.

Do I need to give credit?

No, but we'd be grateful if you support the community with a star on GitHub or a link to Uiverse.

Are elements responsive?

Most are, but not all. Check the specific element before using. You can also easily add responsiveness yourself.

Can I modify elements?

Absolutely! That's the main advantage of the copy-paste approach. The code is yours - change colors, sizes, animations as you wish.

How do I report a bug?

Open an issue on Uiverse GitHub or contact us through Discord.

Are there elements for React/Vue?

Elements are in pure HTML/CSS, but they're easy to integrate with any framework. Just copy the CSS and use the appropriate HTML structure in your component. An individual element page also carries a React export button that assembles markup and styles into a ready component. There is no such option for Vue.

Summary

Uiverse is an essential tool for every frontend developer:

• 7400+ elements - Buttons, cards, loaders, inputs, and more
• Free - Everything under MIT license
• Zero dependencies - Pure CSS or Tailwind
• Copy-paste - Instant usage
• Community-driven - Constantly growing library
• Customizable - Full control over code

Instead of spending hours on styling, leverage the work of thousands of developers and focus on what really matters - your application's logic.