Tabele cenowebloki
Przejrzyste tabele cenowe prezentujące twoje plany. Gotowe bloki UI React w neobrutalistycznym stylu — hero, pricing, auth, dashboards i więcej. Podejrzyj je na każdym rozmiarze ekranu, skopiuj kod albo zainstaluj przez agenta AI i nasz serwer MCP. Działają z Radix UI, Base UI i React Aria.
- Hero, cenniki i auth
- Podgląd każdego punktu przerwania
- Skopiuj kod źródłowy
- MCP gotowy do instalacji
- Radix · Base UI · React Aria
- 158 gotowe bloki
- Sekcje strony, które są dostarczane
- Panele kontrolne i marketing
- Pro odblokowuje kod
- Układy typu „drop-in”
Przejrzyj każdy układ
Tabele cenowe
11 bloków — otwórz dowolną kartę, aby uzyskać pełny podgląd, kod i kroki instalacji.
- 01Pro
Kolorowe poziomy cenowe
Trzy poziomy, każdy z własnym kolorowym pasmem u góry, z przełącznikiem miesiąc/rok i wpuszczonymi panelami funkcji. React i Tailwind — przekoloruj pasma.
- 02Pro
Bento cennika z zapisem e-mail
Połowa rzędu to panel zapisu na bezpłatny okres próbny, obok dwóch kompaktowych kart planów na kolorowym tle. React i Tailwind — podłącz formularz.
- 03Pro
Tabela porównania funkcji
Prawdziwa tabela HTML: 4 plany, 9 wierszy funkcji, każda komórka to wartość, ptaszek lub krzyżyk. React i Tailwind — dodaj wiersz i uzupełnij klucze.
- 04Pro
Tabela cenowa czterech kolumn
Cztery plany połączone w jedną obramowaną płytę, z wyróżnioną kolumną uniesioną ponad górną krawędź. React i Tailwind — oznacz jeden plan.
- 05Pro
Wybór planu po okresie próbnym
Krok po stronie cennika: dwa plany jako grupa radio na panelu marki, nad drobnym drukiem rozliczeń. React i Tailwind — wstaw to w proces zakupu.
- 06Pro
Karty cenowe z ilustracją
Każdy plan otwiera szeroka ilustracja odbiorcy, a polecana karta jest uniesiona ponad rząd. React i Tailwind — podmień grafikę na własną.
- 07Pro
Karty cenowe: kluczowe funkcje
Karty rozdzielające limity od kluczowych funkcji, na ciemnym pasie z suwakowym przełącznikiem rocznym. React i Tailwind — ustaw obie ceny.
- 08Pro
Przełącznik cen miesiąc/rok
Jeden przełącznik zmienia ceny na 10 miesięcy rozliczenia rocznego, nad odwróconymi nagłówkami i ukośną wstążką. React i Tailwind — sprawdź matematykę.
- 09Pro
Szablon czy zamówienie na wymiar
Kupno albo zlecenie, nie poziom planu: karta szablonu w stałej cenie obok wyceny „od” za realizację na zamówienie. React i Tailwind — umów rozmowę.
- 10Pro
Trzy poziomy cen z FAQ
Wypełniona kolorem karta Pro ze wstążką pośrodku, a pod nią FAQ z czterema pytaniami o obiekcje cenowe. React i Tailwind — edytuj tablicę faqs.
- 11Pro
Porównanie dwóch planów
Dwa plany z jednym segmentowym przełącznikiem rozliczeń, karta pro na akcentowej powierzchni. React i Tailwind — zmień nazwy poziomów.