Statystykibloki
Komponenty do wyświetlania statystyk i metryk. 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
Statystyki
9 bloków — otwórz dowolną kartę, aby uzyskać pełny podgląd, kod i kroki instalacji.
- 01Pro
Wykres obszarowy statystyk
Siedmiodniowy wykres obszarowy sprzedaży i kosztów dzieli kartę z sumą i odznaką zmiany, nad czterema liczbami. React i Tailwind: podmień tablicę trendu.
- 02Pro
Tablica statystyk bento
Dwie wąskie karty wzrostu kończą się linkami do szczegółów obok dwa razy szerszej karty marki z liczbą główną. React i Tailwind: podłącz linki do raportów.
- 03Pro
Kompaktowy rząd statystyk
Najkrótszy pasek statystyk w zestawie: cztery karty, każda z kafelkiem ikony obok liczby i dwuwyrazowej etykiety. React i Tailwind: wsuń pod hero.
- 04Pro
Panel statystyk z podziałem
Pełnoszerokościowy kolorowy pas, gdzie trzy liczby dzielą jeden panel przecięty dwupikselowymi liniami. React i Tailwind: zmień treść, wstaw między sekcje.
- 05Pro
Wykres pierścieniowy statystyk
Pierścień satysfakcji z wynikiem wpisanym w otworze, otoczony czterema kartami na przemian czarnymi i białymi. React i Tailwind: zmień proporcję w tablicy.
- 06Pro
Mozaika statystyk z CTA
Przekaz po jednej stronie, dowód po drugiej: nagłówek i dwa przyciski obok mozaiki wysokich i niskich kafelków. React i Tailwind: przebalansuj kafelki.
- 07Pro
Statystyki ze strzałkami trendu
Każda karta przypina okrągłą strzałkę trendu i opisaną zmianę rok do roku do wspólnej linii bazowej. React i Tailwind: ustaw kierunek każdego trendu.
- 08Pro
Dashboard metryk sklepu
Przełącznik dzień/tydzień/miesiąc/rok zmienia cztery karty KPI nad podziałem przychodu i listą produktów. React i Tailwind: pobierz obiekt figures.
- 09Pro
Wyróżnione karty statystyk
Trzy karty metryk na rozmytej teksturze, dokładnie jedna wypełniona kolorem marki, by wzrok wybrał zwycięzcę. React i Tailwind: przenieś flagę highlight.