TailGrids, gotowe bloki UI dla Tailwind CSS

Q: Jak zainstalować komponenty przez wiersz poleceń?

Bieżącym pakietem jest @tailgrids/cli, uruchamiany przez npx. Starszy wpis o nazwie tailgrids jest w rejestrze npm oznaczony jako wycofany i nie należy z niego korzystać. Kod źródłowy darmowej części znajdziesz w repozytorium TailGrids, a pełną listę bloków i aktualne ceny na stronie projektu.

TailGrids, gotowe bloki UI dla Tailwind CSS

TailGrids to zbiór gotowych sekcji interfejsu napisanych klasami Tailwind CSS: nagłówków stron, cenników, siatek funkcji, formularzy kontaktowych i paneli. Kod kopiujesz do siebie i zmieniasz, zamiast instalować zależność. Część biblioteki jest darmowa na licencji MIT, reszta sprzedawana jako jednorazowy zakup z dożywotnim dostępem.

Blok to nie komponent

To rozróżnienie porządkuje całą kategorię i warto je zrozumieć przed wyborem narzędzia, bo decyduje o tym, do czego dana biblioteka się nadaje.

Biblioteka komponentów daje Ci przycisk, pole wyboru i okno dialogowe, czyli elementy, z których budujesz interfejs. Biblioteka bloków daje gotową sekcję: cały nagłówek strony z tytułem, opisem, dwoma przyciskami i obrazkiem, złożony i wyrównany. To dwa różne poziomy i rozwiązują dwa różne problemy.

Bloki oszczędzają czas tam, gdzie układ jest przewidywalny i powtarzalny, czyli na stronach sprzedażowych, w cennikach i w sekcjach z opiniami klientów. Nie oszczędzają go w aplikacji, gdzie każdy ekran jest inny, a wartość leży w zachowaniu komponentów, a nie w ich rozmieszczeniu.

Konsekwencja praktyczna jest taka, że TailGrids porównuje się sensownie z innymi zestawami bloków, a nie z bibliotekami zachowań. Jeśli szukasz dostępnej listy rozwijanej z obsługą klawiatury, potrzebujesz czegoś z rodziny Headless UI, a nie zestawu sekcji.

Model dystrybucji i licencja

Kod kopiujesz do swojego projektu. Nie ma tu zależności, którą aktualizujesz poleceniem, więc poprawki i nowe wersje bloków nie przychodzą same. To ten sam model, który znasz z shadcn/ui, z tą różnicą, że tam kopiujesz zachowanie, a tu układ.

Warstwa darmowa jest wydawana na licencji MIT, więc wolno jej używać komercyjnie bez opłat i bez obowiązku umieszczania odsyłacza w stopce. Obejmuje podstawowe komponenty oraz bloki w kilku kategoriach: dziesięć aplikacyjnych, czternaście marketingowych, dwadzieścia dla sklepów, trzynaście panelowych i trzynaście dla aplikacji z AI.

Wersja trzecia dołożyła narzędzie wiersza poleceń, które wstawia wybrany element do projektu zamiast kazać Ci przeklejać kod ze strony. Warto zwrócić uwagę na nazwę pakietu, bo stara się myli: tailgrids w rejestrze npm jest oznaczony jako wycofany, a bieżącym pakietem jest @tailgrids/cli.

Code

Bash

npx @tailgrids/cli add hero-section

Cennik

Plan	Cena	Zawiera
Essentials	darmowy, MIT	podstawowe komponenty i bloki w pięciu kategoriach
All-Access	199 USD jednorazowo	wszystkie bloki płatne, gotowe szablony, wsparcie mailowe
All-Access dla zespołu	349 USD jednorazowo	to samo dla pięciu osób oraz plik z systemem projektowym w Figmie

Trzy rzeczy warto wiedzieć przed zakupem. Płatność jest jednorazowa i obejmuje dożywotni dostęp wraz z aktualizacjami, więc nie ma tu abonamentu. Plik projektowy w Figmie jest wyłącznie w planie zespołowym, co bywa zaskoczeniem dla kogoś, kto kupuje wersję dla jednej osoby właśnie po to. Ceny bywają okresowo obniżane w stosunku do stawek bazowych, więc sprawdź aktualną wartość na stronie, zanim uznasz podane kwoty za ostateczne.

TailGrids a alternatywy

Cecha	TailGrids	Flowbite	daisyUI	Magic UI
Rodzaj zawartości	gotowe sekcje	komponenty i sekcje	style komponentów	animowane sekcje
Warstwa darmowa	tak, MIT	tak, częściowa	tak, cała	tak, częściowa
Warstwa płatna	jednorazowo	jednorazowo	brak	jednorazowo
Sposób użycia	kopiowanie kodu lub CLI	pakiet albo kopiowanie	pakiet z wtyczką	kopiowanie kodu
Plik w Figmie	tak, w planie zespołowym	osobno	brak	brak
Główne zastosowanie	strony sprzedażowe	aplikacje i strony	szybkie prototypy	strony sprzedażowe

Wybór zależy od tego, czego brakuje Ci najbardziej. Jeśli brakuje czasu na układanie sekcji, TailGrids albo Flowbite dowiozą gotowe kompozycje. Jeśli brakuje spójności w istniejącym projekcie, daisyUI zadziała lepiej, bo dokłada nazwane klasy komponentów zamiast całych sekcji. Jeśli brakuje efektu wizualnego na stronie produktu, sięgnij po zestaw nastawiony na animacje.

Kategorie komponentów

Hero Sections

Hero sections to pierwsze sekcje, które widzą użytkownicy. TailGrids oferuje dziesiątki wariantów.

Code

HTML

<!-- Hero z obrazem i CTA -->
<section class="bg-white py-20 lg:py-[120px]">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full px-4 lg:w-1/2">
        <div class="text-center lg:text-left mb-12 lg:mb-0">
          <span class="mb-4 inline-block rounded-full bg-primary/10 px-4 py-2 text-sm font-semibold text-primary">
            New Version Released
          </span>
          <h1 class="mb-4 text-4xl font-bold leading-tight text-dark sm:text-5xl lg:text-[50px] xl:text-[58px]">
            Build Your Next
            <span class="text-primary">SaaS Product</span>
            Faster
          </h1>
          <p class="mb-8 max-w-[500px] text-lg text-body-color lg:max-w-[450px]">
            Launch faster with pre-built components and templates.
            Save weeks of development time.
          </p>
          <div class="flex flex-wrap items-center justify-center lg:justify-start gap-4">
            <a href="#" class="inline-flex items-center justify-center rounded-lg bg-primary px-8 py-4 text-base font-semibold text-white shadow-md hover:bg-primary/90 transition duration-300">
              Get Started Free
              <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
              </svg>
            </a>
            <a href="#" class="inline-flex items-center justify-center rounded-lg border border-stroke px-8 py-4 text-base font-semibold text-dark hover:bg-gray-50 transition duration-300">
              <svg class="mr-2 w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M8 5v14l11-7z"/>
              </svg>
              Watch Demo
            </a>
          </div>
          <div class="mt-10 flex items-center justify-center lg:justify-start gap-6">
            <div class="flex -space-x-3">
              <img src="user1.jpg" alt="user" class="w-10 h-10 rounded-full border-2 border-white" />
              <img src="user2.jpg" alt="user" class="w-10 h-10 rounded-full border-2 border-white" />
              <img src="user3.jpg" alt="user" class="w-10 h-10 rounded-full border-2 border-white" />
            </div>
            <div>
              <p class="text-sm text-body-color">
                <span class="font-semibold text-dark">5,000+</span> happy customers
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full px-4 lg:w-1/2">
        <div class="relative">
          <img
            src="hero-image.svg"
            alt="hero"
            class="w-full max-w-[600px] mx-auto drop-shadow-2xl"
          />
          <div class="absolute -bottom-8 -left-8 hidden lg:block">
            <div class="rounded-xl bg-white p-4 shadow-lg">
              <div class="flex items-center gap-3">
                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-green-500/10">
                  <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
                <div>
                  <p class="text-sm font-semibold text-dark">Setup Complete</p>
                  <p class="text-xs text-body-color">Ready to go!</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tabele cenowe

Tabele cenowe to kluczowy element każdej strony SaaS.

Code

HTML

<!-- Pricing Section -->
<section class="bg-white py-20 lg:py-[120px]">
  <div class="container mx-auto px-4">
    <div class="text-center mb-16">
      <span class="mb-4 block text-lg font-semibold text-primary">
        Pricing
      </span>
      <h2 class="mb-4 text-3xl font-bold text-dark sm:text-4xl md:text-[42px]">
        Simple, Transparent Pricing
      </h2>
      <p class="mx-auto max-w-[500px] text-lg text-body-color">
        Choose the plan that fits your needs. No hidden fees.
      </p>
    </div>

    <div class="flex flex-wrap justify-center -mx-4">
      <!-- Free Plan -->
      <div class="w-full px-4 md:w-1/2 lg:w-1/3">
        <div class="relative mb-10 rounded-xl bg-white px-8 py-10 shadow-pricing border border-stroke hover:border-primary transition duration-300">
          <span class="mb-4 block text-lg font-semibold text-primary">
            Starter
          </span>
          <h2 class="mb-5 text-[42px] font-bold text-dark">
            $0
            <span class="text-base font-medium text-body-color">/ month</span>
          </h2>
          <p class="mb-8 border-b border-stroke pb-8 text-base text-body-color">
            Perfect for trying out our platform.
          </p>
          <div class="mb-9 flex flex-col gap-4">
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              1 User
            </p>
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              50 Components
            </p>
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              Community Support
            </p>
          </div>
          <a href="#" class="block w-full rounded-lg border border-stroke bg-transparent p-4 text-center text-base font-semibold text-dark transition hover:bg-gray-50">
            Get Started Free
          </a>
        </div>
      </div>

      <!-- Pro Plan (Recommended) -->
      <div class="w-full px-4 md:w-1/2 lg:w-1/3">
        <div class="relative mb-10 rounded-xl bg-primary px-8 py-10 shadow-pricing">
          <div class="absolute -top-4 right-8">
            <span class="inline-block rounded-full bg-white px-4 py-1 text-sm font-semibold text-primary shadow-md">
              Most Popular
            </span>
          </div>
          <span class="mb-4 block text-lg font-semibold text-white/80">
            Professional
          </span>
          <h2 class="mb-5 text-[42px] font-bold text-white">
            $49
            <span class="text-base font-medium text-white/70">/ year</span>
          </h2>
          <p class="mb-8 border-b border-white/20 pb-8 text-base text-white/80">
            Perfect for personal site or client project.
          </p>
          <div class="mb-9 flex flex-col gap-4">
            <p class="flex items-center text-base text-white">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-white/20 text-white">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              1 User
            </p>
            <p class="flex items-center text-base text-white">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-white/20 text-white">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              All 500+ Components
            </p>
            <p class="flex items-center text-base text-white">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-white/20 text-white">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              Lifetime Access
            </p>
            <p class="flex items-center text-base text-white">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-white/20 text-white">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              Priority Support
            </p>
          </div>
          <a href="#" class="block w-full rounded-lg bg-white p-4 text-center text-base font-semibold text-primary transition hover:bg-white/90">
            Choose Professional
          </a>
        </div>
      </div>

      <!-- Business Plan -->
      <div class="w-full px-4 md:w-1/2 lg:w-1/3">
        <div class="relative mb-10 rounded-xl bg-white px-8 py-10 shadow-pricing border border-stroke hover:border-primary transition duration-300">
          <span class="mb-4 block text-lg font-semibold text-primary">
            All Access
          </span>
          <h2 class="mb-5 text-[42px] font-bold text-dark">
            $99
            <span class="text-base font-medium text-body-color">/ year</span>
          </h2>
          <p class="mb-8 border-b border-stroke pb-8 text-base text-body-color">
            Everything you need for your business.
          </p>
          <div class="mb-9 flex flex-col gap-4">
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              5 Users
            </p>
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              All Components + Templates
            </p>
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              Figma Files Included
            </p>
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              Dedicated Support
            </p>
          </div>
          <a href="#" class="block w-full rounded-lg border border-primary bg-transparent p-4 text-center text-base font-semibold text-primary transition hover:bg-primary hover:text-white">
            Choose All Access
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Siatka funkcji

Sekcje features pokazują kluczowe funkcje produktu.

Code

HTML

<!-- Features Grid -->
<section class="bg-gray-50 py-20 lg:py-[120px]">
  <div class="container mx-auto px-4">
    <div class="text-center mb-16">
      <span class="mb-4 block text-lg font-semibold text-primary">
        Features
      </span>
      <h2 class="mb-4 text-3xl font-bold text-dark sm:text-4xl md:text-[42px]">
        Everything You Need
      </h2>
      <p class="mx-auto max-w-[500px] text-lg text-body-color">
        Powerful features to help you build amazing products.
      </p>
    </div>

    <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
      <!-- Feature 1 -->
      <div class="group rounded-xl bg-white p-8 shadow-sm hover:shadow-lg transition duration-300">
        <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
          </svg>
        </div>
        <h3 class="mb-3 text-xl font-semibold text-dark">
          Lightning Fast
        </h3>
        <p class="text-body-color leading-relaxed">
          Optimized for performance. Your website will load in milliseconds,
          providing the best user experience.
        </p>
      </div>

      <!-- Feature 2 -->
      <div class="group rounded-xl bg-white p-8 shadow-sm hover:shadow-lg transition duration-300">
        <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
          </svg>
        </div>
        <h3 class="mb-3 text-xl font-semibold text-dark">
          Fully Responsive
        </h3>
        <p class="text-body-color leading-relaxed">
          Every component is designed mobile-first and works perfectly
          on all screen sizes and devices.
        </p>
      </div>

      <!-- Feature 3 -->
      <div class="group rounded-xl bg-white p-8 shadow-sm hover:shadow-lg transition duration-300">
        <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
          </svg>
        </div>
        <h3 class="mb-3 text-xl font-semibold text-dark">
          Clean Code
        </h3>
        <p class="text-body-color leading-relaxed">
          Well-structured, semantic HTML with Tailwind CSS.
          Easy to understand and customize.
        </p>
      </div>

      <!-- Feature 4 -->
      <div class="group rounded-xl bg-white p-8 shadow-sm hover:shadow-lg transition duration-300">
        <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
          </svg>
        </div>
        <h3 class="mb-3 text-xl font-semibold text-dark">
          500+ Components
        </h3>
        <p class="text-body-color leading-relaxed">
          Massive library of UI components covering every use case
          for modern web applications.
        </p>
      </div>

      <!-- Feature 5 -->
      <div class="group rounded-xl bg-white p-8 shadow-sm hover:shadow-lg transition duration-300">
        <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
          </svg>
        </div>
        <h3 class="mb-3 text-xl font-semibold text-dark">
          Easy Customization
        </h3>
        <p class="text-body-color leading-relaxed">
          Customize colors, fonts, and styles easily with Tailwind CSS
          configuration and utilities.
        </p>
      </div>

      <!-- Feature 6 -->
      <div class="group rounded-xl bg-white p-8 shadow-sm hover:shadow-lg transition duration-300">
        <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
          </svg>
        </div>
        <h3 class="mb-3 text-xl font-semibold text-dark">
          Regular Updates
        </h3>
        <p class="text-body-color leading-relaxed">
          New components and features added regularly.
          Stay up-to-date with the latest design trends.
        </p>
      </div>
    </div>
  </div>
</section>

Navigation / Header

Code

HTML

<!-- Sticky Header with Dropdown -->
<header class="sticky top-0 z-50 bg-white shadow-sm">
  <div class="container mx-auto px-4">
    <div class="flex items-center justify-between py-4">
      <!-- Logo -->
      <a href="/" class="flex items-center">
        <img src="logo.svg" alt="Logo" class="h-8" />
      </a>

      <!-- Desktop Navigation -->
      <nav class="hidden lg:flex items-center gap-8">
        <a href="#" class="text-base font-medium text-dark hover:text-primary transition">
          Home
        </a>
        <div class="relative group">
          <button class="flex items-center gap-1 text-base font-medium text-dark hover:text-primary transition">
            Products
            <svg class="w-4 h-4 transition group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
          </button>
          <!-- Dropdown -->
          <div class="absolute left-0 top-full pt-4 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
            <div class="w-60 rounded-lg bg-white p-4 shadow-lg border border-stroke">
              <a href="#" class="block rounded-md px-4 py-2 text-sm text-dark hover:bg-gray-50">
                Components
              </a>
              <a href="#" class="block rounded-md px-4 py-2 text-sm text-dark hover:bg-gray-50">
                Templates
              </a>
              <a href="#" class="block rounded-md px-4 py-2 text-sm text-dark hover:bg-gray-50">
                Figma Files
              </a>
            </div>
          </div>
        </div>
        <a href="#" class="text-base font-medium text-dark hover:text-primary transition">
          Pricing
        </a>
        <a href="#" class="text-base font-medium text-dark hover:text-primary transition">
          Blog
        </a>
      </nav>

      <!-- CTA Buttons -->
      <div class="hidden lg:flex items-center gap-4">
        <a href="#" class="text-base font-medium text-dark hover:text-primary transition">
          Sign In
        </a>
        <a href="#" class="rounded-lg bg-primary px-6 py-2.5 text-base font-medium text-white hover:bg-primary/90 transition">
          Get Started
        </a>
      </div>

      <!-- Mobile Menu Button -->
      <button class="lg:hidden p-2">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>
    </div>
  </div>
</header>

Testimonials

Code

HTML

<!-- Testimonials Section -->
<section class="bg-white py-20 lg:py-[120px]">
  <div class="container mx-auto px-4">
    <div class="text-center mb-16">
      <span class="mb-4 block text-lg font-semibold text-primary">
        Testimonials
      </span>
      <h2 class="mb-4 text-3xl font-bold text-dark sm:text-4xl">
        What Our Customers Say
      </h2>
    </div>

    <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
      <!-- Testimonial Card -->
      <div class="rounded-xl bg-gray-50 p-8">
        <div class="mb-6 flex items-center">
          <img src="user.jpg" alt="User" class="w-14 h-14 rounded-full mr-4" />
          <div>
            <h4 class="text-lg font-semibold text-dark">John Doe</h4>
            <p class="text-sm text-body-color">CEO at Company</p>
          </div>
        </div>
        <p class="text-body-color leading-relaxed mb-6">
          "TailGrids has saved us countless hours of development time.
          The components are beautiful and well-documented."
        </p>
        <div class="flex items-center gap-1 text-yellow-400">
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20">
            <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
          </svg>
          <!-- Repeat stars -->
        </div>
      </div>
      <!-- More testimonial cards... -->
    </div>
  </div>
</section>

Wersje frameworkowe

React Components

TScomponents/Hero.tsx

TypeScript

// components/Hero.tsx
import React from 'react'

interface HeroProps {
  title: string
  subtitle: string
  ctaText: string
  ctaLink: string
}

export function Hero({ title, subtitle, ctaText, ctaLink }: HeroProps) {
  return (
    <section className="bg-white py-20 lg:py-[120px]">
      <div className="container mx-auto px-4">
        <div className="text-center max-w-3xl mx-auto">
          <h1 className="mb-4 text-4xl font-bold text-dark sm:text-5xl lg:text-6xl">
            {title}
          </h1>
          <p className="mb-8 text-lg text-body-color">
            {subtitle}
          </p>
          <a
            href={ctaLink}
            className="inline-flex items-center rounded-lg bg-primary px-8 py-4 text-base font-semibold text-white hover:bg-primary/90 transition"
          >
            {ctaText}
          </a>
        </div>
      </div>
    </section>
  )
}

Vue Components

components/PricingCard.vue

VUE

<!-- components/PricingCard.vue -->
<template>
  <div
    class="rounded-xl bg-white px-8 py-10 shadow-pricing border border-stroke hover:border-primary transition"
    :class="{ 'bg-primary': featured }"
  >
    <span class="mb-4 block text-lg font-semibold" :class="featured ? 'text-white/80' : 'text-primary'">
      {{ plan }}
    </span>
    <h2 class="mb-5 text-[42px] font-bold" :class="featured ? 'text-white' : 'text-dark'">
      ${{ price }}
      <span class="text-base font-medium" :class="featured ? 'text-white/70' : 'text-body-color'">
        / {{ period }}
      </span>
    </h2>
    <ul class="mb-9 flex flex-col gap-4">
      <li
        v-for="feature in features"
        :key="feature"
        class="flex items-center text-base"
        :class="featured ? 'text-white' : 'text-body-color'"
      >
        <CheckIcon :class="featured ? 'text-white' : 'text-primary'" />
        {{ feature }}
      </li>
    </ul>
    <button
      class="block w-full rounded-lg p-4 text-center font-semibold transition"
      :class="featured ? 'bg-white text-primary hover:bg-white/90' : 'border border-primary text-primary hover:bg-primary hover:text-white'"
    >
      {{ ctaText }}
    </button>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  plan: string
  price: number
  period: string
  features: string[]
  ctaText: string
  featured?: boolean
}>()
</script>

Integracja z projektami

Konfiguracja w Next.js

Code

Bash

# 1. Stwórz projekt Next.js z Tailwind
npx create-next-app@latest my-app --typescript --tailwind
cd my-app

# 2. Skopiuj komponenty TailGrids do src/components/
# 3. Dostosuj tailwind.config.ts

TStailwind.config.ts

TypeScript

// tailwind.config.ts
import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: '#3B82F6',
        dark: '#1E293B',
        'body-color': '#64748B',
        stroke: '#E2E8F0',
      },
      boxShadow: {
        pricing: '0 5px 20px 0 rgba(0, 0, 0, 0.05)',
      },
    },
  },
  plugins: [],
}

export default config

Customizacja kolorów

TStailwind.config.ts

TypeScript

// tailwind.config.ts - Custom color scheme
const config: Config = {
  theme: {
    extend: {
      colors: {
        // Zmień primary na swój brand color
        primary: {
          DEFAULT: '#6366F1', // Indigo
          50: '#EEF2FF',
          100: '#E0E7FF',
          500: '#6366F1',
          600: '#4F46E5',
          700: '#4338CA',
        },
        // Custom dark shades
        dark: {
          DEFAULT: '#0F172A',
          50: '#1E293B',
          100: '#334155',
        },
      },
    },
  },
}

Pełna lista kategorii komponentów

TailGrids oferuje komponenty w następujących kategoriach:

Layout & Structure

Headers/Navbars (25+ wariantów)
Footers (20+ wariantów)
Sidebars (15+ wariantów)
Grids & Containers (10+ wariantów)

Content Sections

Hero Sections (30+ wariantów)
Features (25+ wariantów)
About/Team (20+ wariantów)
Testimonials (15+ wariantów)
Stats/Counters (10+ wariantów)

Marketing

Pricing Tables (20+ wariantów)
Call to Action (15+ wariantów)
Newsletters (10+ wariantów)
Banners (15+ wariantów)

E-commerce

Product Cards (20+ wariantów)
Product Grids (10+ wariantów)
Cart Components (10+ wariantów)
Checkout Forms (5+ wariantów)

Forms & Inputs

Contact Forms (15+ wariantów)
Login/Register (20+ wariantów)
Input Fields (30+ wariantów)
Buttons (40+ wariantów)

UI Elements

Cards (50+ wariantów)
Modals (15+ wariantów)
Tabs (10+ wariantów)
Accordions (10+ wariantów)
Alerts (15+ wariantów)
Badges (20+ wariantów)

Blog

Blog Cards (15+ wariantów)
Blog Lists (10+ wariantów)
Article Layouts (5+ wariantów)

Co realnie zyskujesz, a czego nie

Oszczędność czasu jest tu prawdziwa, ale warto wiedzieć, gdzie się kończy, żeby nie budować planu projektu na fałszywym założeniu.

Zyskujesz pierwszą wersję ekranu w kilkanaście minut zamiast w kilka godzin. Sekcja jest złożona, wyrównana, ma sensowne odstępy i zachowuje się poprawnie na telefonie. Dla kogoś, kto nie czuje się pewnie w projektowaniu układu, to najcenniejsza część oferty, bo dostaje kompozycję zrobioną przez kogoś, kto się na tym zna.

Czego bloki nie rozstrzygną, to które sekcje mają w ogóle powstać i w jakiej kolejności czytelnik ma zobaczyć argumenty. To jest osobna faza i osobna kategoria narzędzi: Relume zamienia opis firmy w mapę strony i surowe szkielety podstron, celowo pozbawione wyglądu. Kolejność bywa więc taka, że najpierw ustalasz strukturę tam, a dopiero potem szukasz tutaj sekcji, które ją wypełnią.

Nie zyskujesz natomiast oryginalności. Bloki są rozpoznawalne i strona złożona wyłącznie z nich wygląda jak setki innych stron złożonych z tych samych bloków. To nie jest wada, dopóki celem jest szybkie postawienie czegoś działającego, i staje się wadą, kiedy produkt ma się czymś wyróżniać. Rozsądny kompromis polega na tym, żeby użyć bloków wszędzie tam, gdzie układ jest konwencjonalny i nikt na niego nie patrzy, czyli w stopce, cenniku czy sekcji z pytaniami, a własną robotę zostawić na jeden lub dwa ekrany, które faktycznie sprzedają produkt.

Nie zyskujesz też zachowania złożonych elementów. Blok cennika to układ i style, a nie logika przełączania między rozliczeniem miesięcznym a rocznym. Kod interakcji dopisujesz sam, a przy elementach wymagających obsługi klawiatury i fokusa warto połączyć te sekcje z osobną warstwą zachowań.

Trzecia rzecz to spójność w dłuższym horyzoncie. Skoro kopiujesz kod, każda sekcja żyje własnym życiem od momentu wklejenia. Po pół roku i dwudziestu sekcjach masz dwadzieścia niezależnych kawałków, w których ta sama zmiana koloru wymaga dwudziestu edycji. Ratunkiem jest wydzielenie wspólnych elementów do własnych komponentów zaraz po wklejeniu, zamiast odkładania tego na później.

Jak wpiąć to w projekt na Next.js

Bloki są napisane jako znaczniki z klasami, więc wklejenie ich do komponentu w Next.js działa od razu, o ile projekt ma skonfigurowany Tailwind. Warto jednak od pierwszej sekcji przyjąć kilka nawyków, bo bez nich strona rozjeżdża się po kilku tygodniach.

Pierwszy dotyczy podziału. Wklejona sekcja to zwykle sto kilkadziesiąt linii, z których większość jest powtarzalna. Zamiast trzymać ją w pliku strony, wydziel od razu osobny komponent i wystaw jako właściwości to, co ma się zmieniać: tytuł, opis, listę pozycji. Strona zostaje czytelna, a druga podobna sekcja powstaje przez ponowne użycie zamiast przez kolejne wklejenie.

Drugi dotyczy obrazów. Bloki zawierają zwykłe znaczniki obrazu, a w tym frameworku warto podmienić je na komponent obsługujący optymalizację, bo inaczej tracisz automatyczne skalowanie i format dopasowany do przeglądarki. To jedna z tych zmian, które łatwo pominąć, a które widać w wynikach pomiarów szybkości.

Trzeci dotyczy kolorów. Zanim wkleisz drugą sekcję, przenieś paletę do konfiguracji Tailwinda i zamień w bloku wartości domyślne na własne nazwy. Zrobienie tego przy pierwszej sekcji zajmuje kwadrans, przy dziesiątej jest już żmudną pracą wyszukiwania i zamiany w wielu plikach.

Czwarty dotyczy trybu ciemnego. Bloki zwykle mają warianty dla ciemnego motywu, ale zakładają konkretny sposób jego włączania. Sprawdź, czy zgadza się z tym, co masz w projekcie, zanim uznasz, że tryb ciemny nie działa.

Typowe błędy

Pierwszy to wklejanie sekcji bez usuwania tego, czego nie używasz. Bloki są napisane szeroko, z wariantami i klasami na wypadek różnych sytuacji, więc po wklejeniu zostaje sporo martwego kodu. Przejrzenie go od razu zajmuje pięć minut, a pominięcie tego kroku zostaje w projekcie na zawsze.

Drugi to niedopasowanie do własnej skali odstępów i kolorów. Bloki używają domyślnych wartości Tailwinda, a Twój projekt najprawdopodobniej ma własną paletę. Wklejenie bez zamiany daje stronę, na której połowa elementów ma kolory z motywu, a połowa domyślne, i różnicę widać.

Trzeci to poleganie na wersji darmowej przy planowaniu projektu. Zakres bloków bezpłatnych jest opisany dokładnie i nie obejmuje wszystkiego. Sprawdź, czy sekcje, których potrzebujesz, mieszczą się w tej warstwie, zanim zaplanujesz pracę na jej podstawie.

Czwarty to instalowanie starego pakietu. Wpis tailgrids w rejestrze npm jest oznaczony jako wycofany i odsyła do @tailgrids/cli, więc poradniki sprzed kilku wersji prowadzą w ślepy zaułek.

Piąty to traktowanie zestawu bloków jako systemu projektowego. To są gotowe kompozycje, a nie zbiór reguł mówiących, jak budować nowe ekrany. System projektowy nadal musi powstać po Twojej stronie, a bloki są w nim materiałem, nie odpowiedzią. Różnicę widać przy pierwszym ekranie, którego w zestawie nie ma: mając system, wiesz, jakich odstępów i wielkości tekstu użyć, a mając wyłącznie bloki, zgadujesz i wychodzi coś, co nie pasuje do reszty.

Szósty, najbardziej kosztowny w dłuższym terminie, to zapominanie o źródle. Skoro kod jest kopiowany, po roku nikt w zespole nie pamięta, która sekcja pochodzi z biblioteki, a która powstała ręcznie. Krótki komentarz przy wklejeniu albo wpis w dokumentacji projektu oszczędza sporo czasu przy późniejszym ujednolicaniu, bo od razu wiadomo, gdzie szukać oryginału i czym się różni od tego, co masz.

FAQ

Czy TailGrids można używać komercyjnie za darmo?

Tak, warstwa darmowa jest wydawana na licencji MIT, więc wolno jej używać w projektach komercyjnych bez opłat i bez obowiązku umieszczania odsyłacza w stopce. Płatne są dodatkowe bloki, gotowe szablony i plik projektowy w Figmie.

Czy płaci się abonament?

Nie, płatne plany są jednorazowym zakupem z dożywotnim dostępem i aktualizacjami. Wersja dla jednej osoby kosztuje 199 dolarów, a zespołowa dla pięciu osób 349 dolarów, przy czym ceny bywają okresowo obniżane.

Który plan zawiera pliki z Figmy?

Wyłącznie plan zespołowy. Kupując wersję dla jednej osoby, nie dostajesz systemu projektowego w Figmie, co bywa zaskoczeniem, bo to często główny powód zakupu.

Czy komponenty mają obsługę klawiatury i czytników ekranu?

Bloki dostarczają układ i style, a nie pełną warstwę zachowań. Przy elementach interaktywnych warto połączyć je z biblioteką odpowiadającą za dostępność, zamiast zakładać, że wklejony kod ją zapewnia.

Jak zainstalować komponenty przez wiersz poleceń?

Bieżącym pakietem jest @tailgrids/cli, uruchamiany przez npx. Starszy wpis o nazwie tailgrids jest w rejestrze npm oznaczony jako wycofany i nie należy z niego korzystać.

Kod źródłowy darmowej części znajdziesz w repozytorium TailGrids, a pełną listę bloków i aktualne ceny na stronie projektu.