Uiverse, społecznościowa biblioteka elementów UI

Uiverse, społecznościowa biblioteka elementów UI

Uiverse to zbiór pojedynczych elementów interfejsu zgłaszanych przez społeczność: przycisków, kart, wskaźników ładowania, przełączników. Każdy element to samodzielny fragment znaczników ze stylami, który kopiujesz do projektu. Nie ma tu pakietu do zainstalowania ani zależności do utrzymania, a całość jest na licencji MIT.

Czym to jest, a czym nie jest

To rozróżnienie decyduje o tym, czy w ogóle warto tu zaglądać, bo nazwa „biblioteka komponentów" myli.

Biblioteka komponentów daje spójny system: elementy pasujące do siebie, wspólne zmienne motywu, przewidywalne zachowanie i jedno źródło aktualizacji. Uiverse daje coś innego, mianowicie katalog niezależnych pomysłów wizualnych. Każdy element napisał ktoś inny, w swoim stylu, bez uzgadniania czegokolwiek z resztą.

Wynika z tego zastosowanie, które warto nazwać wprost. To jest miejsce, gdzie szukasz jednego efektownego elementu, a nie fundamentu interfejsu. Przycisk z nietypowym zachowaniem przy najechaniu, wskaźnik ładowania o ciekawej animacji, przełącznik z płynnym przejściem. Rzeczy, które w gotowej bibliotece byłyby nudne, bo biblioteki celowo są zachowawcze.

Odwrotnie, budowanie całego interfejsu z elementów stąd kończy się źle i przewidywalnie. Dwadzieścia elementów od dwudziestu autorów to dwadzieścia różnych konwencji nazewnictwa, różne skale odstępów i różne podejścia do kolorów. Spójności trzeba wtedy dopilnować ręcznie, a to więcej pracy niż napisanie tych elementów od zera na własnym systemie.

Między jednym a drugim biegunem leży trzecia możliwość, o której warto wiedzieć przed przeglądaniem katalogu. Zbiory takie jak React Bits też kopiuje się do projektu zamiast instalować, ale pisze je jeden zespół w jednej konwencji, a komponenty przychodzą gotowe pod Reacta, w wariantach dla TypeScriptu i dla klas narzędziowych. Wyboru jest tam znacznie mniej niż tutaj i zakres jest węższy, bo to również warstwa dekoracyjna, a nie formularze i tabele. W zamian dwa wzięte stamtąd elementy będą do siebie pasować.

Praktyczna rada: traktuj to jak katalog inspiracji z gotowym kodem. Bierz stąd pojedyncze rzeczy i dostosowuj je do swojego systemu, zamiast dostosowywać system do nich. Sprawdzianem jest pytanie, czy potrafisz wskazać, dlaczego akurat ten element ma wyglądać inaczej niż reszta interfejsu. Jeśli odpowiedź brzmi „bo tak ładniej wygląda", zwykle lepiej wyjdzie użycie tego, co już masz.

Jakość kodu i czego sprawdzić przed wklejeniem

Skoro elementy pochodzą od różnych osób i nie przechodzą przeglądu technicznego, jakość bywa nierówna. Kilka rzeczy warto sprawdzić za każdym razem, bo powtarzają się regularnie.

Pierwsza to sztywne wartości. Element wygląda dobrze w demonstracji, bo ma zapisaną szerokość w pikselach i rozmiar tekstu dobrany do tego jednego przypadku. Wklejony w Twój układ przestaje pasować przy innej długości napisu albo na węższym ekranie. Zamiana wartości bezwzględnych na względne jest zwykle pierwszą rzeczą do zrobienia.

Druga to nazwy klas. Element z klasą o nazwie w rodzaju „button" albo „card" zderzy się z tym, co już masz w projekcie, i objawi się to zmianą wyglądu w zupełnie innym miejscu. Przy kopiowaniu warto od razu nadać klasom przedrostek albo zamknąć je w module stylów.

Trzecia to złożoność animacji. Efekty oparte o cienie, rozmycia i filtry wyglądają efektownie i potrafią kosztować sporo mocy przy renderowaniu, zwłaszcza gdy taki element powtarza się na liście. Animowanie przekształceń i przezroczystości jest tanie, animowanie pozostałych właściwości zwykle nie.

Czwarta to obsługa stanów, o których autor mógł nie pomyśleć. Element demonstrowany w jednym stanie często nie ma zdefiniowanego wyglądu dla stanu wyłączonego, dla fokusa z klawiatury ani dla wersji w ciemnym motywie. To nie jest wada zgłoszenia, tylko konsekwencja tego, że powstawało jako pokaz.

Jak to wpiąć w projekt na Tailwindzie

Większość elementów w tym katalogu istnieje w dwóch odmianach: jako zwykłe style i jako klasy narzędziowe. Wybór między nimi nie jest oczywisty i zależy od tego, jak zbudowany jest Twój projekt.

Odmiana ze zwykłymi stylami jest łatwiejsza do wzięcia, bo kopiujesz blok stylów i gotowe. Sprawdza się przy pojedynczym efekcie, którego nie zamierzasz zmieniać, oraz przy animacjach opartych o klatki kluczowe, bo te i tak trzeba zadeklarować osobno.

Odmiana z klasami narzędziowymi wpasowuje się w projekt na Tailwind CSS bez dokładania osobnego arkusza, ale ma jedną pułapkę. Elementy zgłaszane przez społeczność powstawały w różnych momentach, więc część korzysta ze składni z trzeciej wersji, która w czwartej działa inaczej albo wcale. Jeśli skopiowany element nie wygląda jak na podglądzie, to jest pierwsza rzecz do sprawdzenia.

Jest jeszcze trzecia droga, o której warto pamiętać przy większym projekcie. Zamiast wklejać element bezpośrednio tam, gdzie go potrzebujesz, wydziel go od razu do własnego komponentu z sensowną nazwą. Skopiowany fragment użyty w pięciu miejscach to pięć kopii, które rozjadą się przy pierwszej poprawce, a wydzielenie kosztuje minutę w momencie, w którym i tak masz ten kod przed oczami.

Dostępność, czyli najważniejsze zastrzeżenie

Ta sekcja jest krótka, ale ważniejsza od reszty, bo dotyczy rzeczy, której nie widać na podglądzie.

Wiele elementów w takich katalogach buduje kontrolki z niewłaściwych znaczników: przycisk zrobiony z pola wyboru, przełącznik z etykiety i ukrytego pola, karta reagująca na kliknięcie zbudowana z bloku. Wygląda i działa myszą, a przestaje istnieć dla kogoś korzystającego z klawiatury albo czytnika ekranu.

Drugim powtarzalnym problemem jest usuwanie obrysu fokusa, bo „psuje wygląd". Element bez widocznego wskazania fokusa jest nieobsługiwalny bez wzroku, a jest to jedna z pierwszych rzeczy, które wychodzą w audycie dostępności.

Reguła, która porządkuje sprawę: bierz stąd wygląd, a strukturę pisz sam. Skopiuj style, ale osadź je na właściwym znaczniku, czyli przycisk na przycisku, a pole wyboru na polu wyboru. Kosztuje to kilka minut i usuwa cały problem, bo poprawne znaczniki niosą zachowanie klawiatury i opis dla czytnika za darmo.

Jeśli potrzebujesz gotowych elementów z tą warstwą już rozwiązaną, właściwym miejscem jest biblioteka zachowań w rodzaju Headless UI albo Radix UI, do której dokładasz własne style, choćby zainspirowane tym, co znajdziesz w tym katalogu.

Strona

Strona: uiverse.io

Repozytorium lustrzane: github.com/uiverse-io/galaxy

Warto przy tym wiedzieć, że repozytorium na GitHubie jest kopią, a nie źródłem. Elementy zgłasza się przez stronę, a bezpośrednie zgłoszenia zmian do repozytorium są ignorowane. Ostatnia synchronizacja tej kopii pochodzi z września 2024 roku, więc podana tam liczba elementów jest niższa niż na stronie. Jeśli szukasz aktualnego zbioru, przeglądaj go na stronie, a repozytorium traktuj jako archiwum.

Licencja MIT oznacza swobodę użycia, także komercyjnego, bez obowiązku wskazywania autora. Twórcy proszą jednak o dobrowolne podanie autorstwa elementu i samego serwisu, co przy pojedynczym efekcie w projekcie kosztuje jedną linię komentarza w kodzie.

Dlaczego ludzie tu zaglądają

Warto rozdzielić dwa powody, bo prowadzą do różnych sposobów korzystania.

Pierwszy to oszczędność czasu przy rzeczy, której nie chce się pisać. Wskaźnik ładowania z płynną animacją albo przełącznik z przejściem to godzina dłubania w stylach, a tutaj jest gotowy. Przy jednym elemencie w projekcie to czysty zysk i nikt nie będzie się zastanawiał nad architekturą.

Drugi, mniej oczywisty i moim zdaniem cenniejszy, to nauka. Przeglądanie cudzych rozwiązań tego samego problemu pokazuje techniki, na które samemu trudno wpaść: sposoby budowania cieni, warstwowanie gradientów, animowanie pseudoelementów zamiast dokładania znaczników. Nawet jeśli nie weźmiesz elementu, zobaczysz, jak ktoś to zrobił.

Odwrotnie, powód, który się nie broni, to szukanie tu podstaw interfejsu. Formularz, tabela czy okno dialogowe wymagają spójności i poprawnej struktury, a nie efektownego wyglądu, więc do tych rzeczy właściwym miejscem jest normalna biblioteka komponentów.

Warto też uczciwie zaznaczyć, że jakość jest nierówna z natury. Zgłoszenia przechodzą moderację pod kątem tego, czy działają i wyglądają, a nie pod kątem struktury znaczników, wydajności czy dostępności. To nie jest zarzut wobec projektu, bo taki jest jego zamysł, ale trzeba o tym wiedzieć, zanim wklei się cokolwiek do produktu.

Problem z tradycyjnymi bibliotekami interfejsu

Typowe podejścia do stylowania mają swoje wady:

1. Pełne biblioteki (Bootstrap, Material UI)

   • Duży rozmiar paczki wynikowej
   • Trudna zmiana wyglądu
   • Spójny, ale rozpoznawalnie typowy efekt

2. Płatne zestawy komponentów dla Tailwinda

   • Opłata jednorazowa albo roczna za programistę
   • Ceny zmieniają się często, więc sprawdź je u producenta
   • Koszt narasta przy większym zespole

3. Pisanie od zera

   • Czasochłonne
   • Wymaga biegłości w CSS
   • Łatwo o niespójności

Rozwiązanie Uiverse

Uiverse łączy zalety obu podejść:

• Darmowe - wszystko na licencji MIT
• Bez zależności - czysty CSS albo Tailwind
• Do zmiany - kod jest Twój, przerabiasz go dowolnie
• Sprawdzone - zgłoszenia przechodzą moderację społeczności
• Duży wybór - ponad 7000 elementów

Uiverse vs alternatywy

Dwie liczby z tej tabeli wymagają komentarza. Tailwind UI nosi od 2025 roku nazwę Tailwind Plus i ma dwie stawki zamiast jednej: 299 USD za licencję osobistą i 979 USD za zespołową dla maksymalnie dwudziestu pięciu osób. Obie to płatność jednorazowa, bez abonamentu, obejmująca również przyszłe dodatki. Liczba elementów Uiverse pochodzi ze strony i rośnie co tydzień, więc traktuj ją jako stan na sierpień 2026 roku, a nie jako wartość stałą.

Kategorie elementów

Buttons (Przyciski)

Największa kolekcja przycisków w internecie:

<!-- 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>

Rodzaje przycisków dostępnych na Uiverse:

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

Loaders & Spinners

Setki animowanych loaderów:

<!-- 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>

Typy loaderów:

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

Cards

Karty do prezentacji treści:

<!-- 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>

Rodzaje kart:

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

Inputs & Forms

Elementy formularzy:

<!-- 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>

Typy inputów:

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

Checkboxes & Toggles

Niestandardowe checkboxy i przełączniki:

<!-- 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>

Inne kategorie

• Modals - Okna modalne i dialogi
• Tooltips - Podpowiedzi
• Navbars - Nawigacja
• Footers - Stopki
• Tabs - Zakładki
• Accordions - Akordeony
• Badges - Odznaki
• Alerts - Powiadomienia
• Breadcrumbs - Ścieżki nawigacji
• Pagination - Paginacja

Jak używać Uiverse

Metoda 1: Copy-Paste (Najprostsza)

1. Wejdź na uiverse.io
2. Przeglądaj lub szukaj elementów
3. Kliknij na wybrany element
4. Kliknij "Copy" (HTML lub CSS)
5. Wklej do swojego projektu

Metoda 2: Tailwind Version

Wiele elementów ma wersję Tailwind:

<!-- 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>

Metoda 3: integracja z Figmą

Uiverse oferuje integrację z Figma:

1. Zainstaluj plugin Uiverse dla Figma
2. Przeglądaj elementy bezpośrednio w Figma
3. Wstawiaj jako komponenty do designu

Tworzenie i publikowanie

Jak dodać własny element

1. Utwórz element na uiverse.io/create
2. Napisz kod HTML i CSS (lub Tailwind)
3. Podgląd - zobacz jak wygląda
4. Submit - wyślij do recenzji
5. Approval - po zatwierdzeniu pojawi się w bibliotece

<!-- Przykład 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 {
  /* Twoje style */
}
</style>

Wytyczne dla kontrybutorów

• Element musi być oryginalny
• Kod musi być czysty i czytelny
• Responsywność jest mile widziana
• Animacje powinny być płynne
• Accessibility jest ważne

Integracja z frameworkami

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 z Tailwind

// Bezpośrednio używaj Tailwind classes z 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>
  )
}

Wskazówki praktyczne

Customizacja kolorów

Większość elementów Uiverse używa CSS custom properties lub bezpośrednich wartości. Możesz łatwo zmienić kolory:

/* Oryginał z Uiverse */
.btn {
  background: #3b82f6;
}

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

/* Użycie */
:root {
  --primary-color: #8b5cf6; /* Twój kolor */
}

Responsywność

Dodaj media queries do elementów:

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

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

Dark mode

Większość elementów można łatwo dostosować do dark mode:

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

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

/* Lub z klasą */
.dark .card {
  background: #1f2937;
  color: #f3f4f6;
}

FAQ - Najczęściej zadawane pytania

Czy mogę używać elementów komercyjnie?

Tak! Wszystkie elementy są na licencji MIT. Możesz używać ich w projektach komercyjnych bez żadnych ograniczeń.

Czy muszę dawać credit?

Nie, ale będziemy wdzięczni jeśli wspomożesz społeczność gwiazdką na GitHubie lub linkiem do Uiverse.

Czy elementy są responsywne?

Większość tak, ale nie wszystkie. Sprawdź konkretny element przed użyciem. Możesz też łatwo dodać responsywność samemu.

Czy mogę modyfikować elementy?

Oczywiście! To główna zaleta podejścia copy-paste. Kod jest Twój - zmień kolory, rozmiary, animacje jak chcesz.

Jak zgłosić błąd?

Otwórz issue na GitHubie Uiverse lub skontaktuj się przez Discord.

Czy są elementy dla React/Vue?

Elementy są w czystym HTML/CSS, ale łatwo je zintegrować z każdym frameworkiem. Wystarczy skopiować CSS i użyć odpowiedniej struktury HTML w komponencie. Na stronie pojedynczego elementu jest dodatkowo przycisk eksportu do Reacta, który składa znaczniki i style w gotowy komponent. Dla Vue takiej opcji nie ma.

Podsumowanie

Uiverse to niezbędne narzędzie dla każdego frontend developera:

• 7400+ elementów - Przyciski, karty, loadery, inputy i więcej
• Darmowe - Wszystko na licencji MIT
• Zero zależności - Czysty CSS lub Tailwind
• Copy-paste - Natychmiastowe użycie
• Community-driven - Stale rosnąca biblioteka
• Customizable - Pełna kontrola nad kodem

Zamiast tracić godziny na stylowanie, skorzystaj z pracy tysięcy deweloperów i skup się na tym, co naprawdę ważne - logice Twojej aplikacji.