Komponenty
Darmowe komponenty CSS Tailwind CSS z wbudowaną dostępnością WCAG AA/AAA. Nie wymaga JavaScript, jest niezależny od frameworka i kompatybilny z Django, HTMX, Laravel, React, Vue i dowolnym stosem. Gotowy do użycia i łatwy do dostosowania.
Frutjam dostarcza ponad 52 komponenty CSS Tailwind obsługujące tylko CSS — przyciski, moduły, formularze, nawigację, wyświetlanie danych i inne — stworzone dla Tailwind CSS v4. Każdy komponent używa nazw klas semantycznych (.btn, .card, .badge), które współpracują z dowolną klasą narzędzi Tailwind. Nie jest dołączony żaden JavaScript, nie jest wymagany kontekst React i nie są potrzebne żadne wtyczki PostCSS poza samym Tailwindem. Każdy komponent jest dostępny od razu po wyjęciu z pudełka, z ręcznie dostrojonymi parami kolorów OKLCH, które gwarantują czytelny kontrast na każdej powierzchni. Ponieważ Frutjam obsługuje wyłącznie CSS i jest niezależny od frameworka, te same znaczniki HTMX działają w szablonach Django, odpowiedziach HTMX, Laravel Blade, Rails ERB, React JSX lub zwykłym statycznym HTMX – bez modyfikacji.
Nowy użytkownik Frutjama?
Rozpocznij pracę w ciągu kilku sekund — dwa importy i gotowe do tworzenia.
Akordeon
Tylko CSS Akordeon CSS Tailwind używający natywnego `<details>`/`<summary>`. Rozwijaj i zwijaj sekcje treści bez JavaScript. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Alarm
Alert CSS Tailwind zawierający wyłącznie informacje, informacje o powodzeniu, ostrzeżenia i warianty błędów. Miękki styl, miejsce na ikonę i wzór do odrzucenia. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Awatara
Awatar CSS Tailwind tylko dla CSS dla obrazów profilowych. Rozmiary xs-xl, układanie grupowe i wskaźnik stanu online/offline. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Odznaka
Odznaka CSS Tailwind tylko dla CSS z wariantami podstawowymi, dodatkowymi, akcentami, informacjami, sukcesem, ostrzeżeniami i błędami. Style miękkie, konturowe i widmowe, rozmiary xs-lg. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Bułka tarta
Nawigacja nawigacyjna CSS Tailwind, oparta wyłącznie na CSS, z niestandardowymi separatorami i dostępnymi znacznikami punktów orientacyjnych. WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym projektem Tailwind CSS v4.
Przycisk
Przycisk CSS Tailwind obsługujący wyłącznie CSS z wariantami podstawowymi, dodatkowymi, akcentami, duchami, konturami i miękkimi. Rozmiary xs-xl, stan ładowania, wyłączone i ikony przycisków. Tylko CSS, WCAG AA, współpracuje z Django, HTMX, Laravel, React.
Karta
Karta CSS Tailwind zawierająca wyłącznie CSS ze stylami konturu, cienia i płaskiego. Kompaktowe, domyślne i duże rozmiary. Zawartość karty, tytuł karty, miejsca na stopkę karty. WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Karuzela
Karuzela CSS Tailwind wykorzystująca tylko funkcję CSS, korzystająca z funkcji przewijania. Poziomy układ slajdów z elementami sterującymi nawigacją i nie wymaga JavaScript. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Pogawędzić
Komponent dymka czatu CSS Tailwind obsługujący wyłącznie CSS. Pozycje początkowe i końcowe wysłanych i odebranych wiadomości, z miejscami na awatary i sygnatury czasowe. WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Pole wyboru
Pole wyboru CSS Tailwind tylko dla CSS z podstawowymi, dodatkowymi, akcentowanymi i semantycznymi wariantami kolorów. Rozmiary xs-xl, stan nieokreślony. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Składany
Zwijany panel CSS Tailwind wykorzystujący natywny element `<details>`. Pokaż i ukryj sekcje treści bez JavaScript. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Combobox
Combobox Tailwind CSS obsługujący tylko CSS z filtrowaniem wyszukiwania na żywo i dostępną listą rozwijaną. Nawigacja klawiaturowa, warianty kolorystyczne. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Odliczanie
Minutnik CSS Tailwind tylko dla CSS. Animowane wyświetlanie liczb dla dni, godzin, minut i sekund. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Róż
Przeglądarka różnic CSS Tailwind obsługująca tylko CSS, umożliwiająca porównywanie treści obok siebie za pomocą przeciąganego dzielnika. Nie wymaga JavaScriptu. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Rozdzielacz
Tylko CSS Dzielnik CSS Tailwind — poziomy i pionowy z opcjonalną wyśrodkowaną etykietą. Warianty kolorystyczne i rozmiarowe. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Szuflada
Szuflada CSS Tailwind tylko dla CSS z natywnym przełącznikiem pola wyboru. Wysuwany panel boczny do nawigacji lub filtrów bez JavaScript. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Stopka
Stopka CSS Tailwind zawierająca wyłącznie CSS z układem wielu kolumn, logo, linkami i miejscami na prawa autorskie. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym projektem Tailwind CSS v4.
Chodnikowiec
Nagłówek strony CSS Tailwind wyłącznie w formacie CSS — układ górnego paska z miejscami na markę, nawigację i działania. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Bohater
Sekcja bohatera CSS Tailwind przeznaczona wyłącznie dla stron docelowych. Układ o pełnej szerokości z wyśrodkowanym nagłówkiem, opisem i wezwaniem do działania. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Wskaźnik
Tylko CSS Wskaźnik CSS Tailwind do nakładania odznak lub kropek na narożniki dowolnego elementu. Warianty kolorystyczne i rozmieszczenie. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Wejście
Tylko CSS Dane wejściowe CSS Tailwind z podstawowymi, dodatkowymi, akcentowanymi i semantycznymi wariantami kolorów. Rozmiary xs-xl, miejsca na dodatki na przedrostki i sufiksy, styl ducha. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Dołączyć
Tylko CSS Łączenie Tailwind CSS w celu grupowania przycisków, danych wejściowych lub wyborów w połączoną jednostkę. Poziome i pionowe. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
KBD
Komponent kbd CSS Tailwind, przeznaczony wyłącznie do wyświetlania skrótów klawiaturowych i kombinacji klawiszy. Warianty rozmiarów. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Połączyć
Link CSS Tailwind obejmujący wyłącznie CSS z podstawowymi, dodatkowymi, akcentującymi i neutralnymi wariantami kolorów. Najedź kursorem na podkreślenie i gładkie style. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Załadunek
Wskaźnik ładowania CSS Tailwind tylko dla CSS z animacjami pokrętła, kropek, pierścienia i pasków. Warianty kolorów i rozmiarów, nie wymaga JavaScript. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Duży namiot
Namiot CSS Tailwind obsługujący wyłącznie CSS do poziomego przewijania treści i logo. Sterowanie prędkością i kierunkiem za pomocą CSS, bez JavaScript. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Maska
Tylko CSS Maska Tailwind CSS do przycinania obrazów w kształty — okrąg, wiewiórka, serce, sześciokąt i inne. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Menu
Pionowe menu CSS Tailwind tylko dla CSS dla list nawigacyjnych. Stany elementów aktywnych, wyłączonych i ikon. Warianty rozmiarów. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Modalny
Modal CSS Tailwind tylko dla CSS, wykorzystujący natywny element `<dialog>`. Responsywny rozmiar, tło i pułapka ostrości. Brak JavaScriptu do podstawowego użytku. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Pasek nawigacyjny
Pasek nawigacyjny CSS Tailwind obsługujący wyłącznie CSS z marką, linkami nawigacyjnymi i miejscami akcji. Warianty lepkie i przezroczyste. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Paginacja
Paginacja CSS Tailwind tylko dla CSS dla ponumerowanych stron, strzałek poprzedniej/następnej, przerw w wielokropkach, dostępnych wejść radiowych i wyboru przeskoku strony. Nie wymaga JavaScriptu. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Popover
Popover CSS Tailwind wykorzystujący wyłącznie CSS, korzystający z natywnego API popover. Pływający panel treści z podpowiedziami i listami rozwijanymi. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Postęp
Pasek postępu CSS Tailwind tylko dla CSS z podstawowymi, dodatkowymi, akcentującymi i semantycznymi wariantami kolorów. Rozmiary xs-xl. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Promieniowy postęp
Postęp radialny CSS Tailwind — tylko CSS — okrągły pierścień postępu ze wskazaniem procentowym. Warianty kolorów i rozmiarów, bez JavaScript. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Radio
Przyciski opcji CSS Tailwind tylko dla CSS z podstawowymi, dodatkowymi, akcentującymi i semantycznymi wariantami kolorów. Rozmiary xs-xl. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Zakres
Suwak zakresu CSS Tailwind tylko dla CSS z podstawowymi, dodatkowymi, akcentowanymi i semantycznymi wariantami kolorów. Rozmiary xs-xl. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Ocena
Komponent gwiazdek i ocen serca w Tailwind CSS wyłącznie dla CSS. Rozmiary xs-xl, obsługa półgwiazdkowa, nie wymaga JavaScript. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Wybierać
Lista rozwijana wyboru CSS Tailwind, zawierająca tylko podstawowe, dodatkowe, akcentujące i semantyczne warianty kolorów. Rozmiary xs-xl, fason duch. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Pasek boczny
Pasek boczny CSS Tailwind tylko dla CSS dla bocznych paneli nawigacyjnych. Składany, ze stanami elementów nawigacji i nagłówkami sekcji. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Szkielet
Moduł ładujący szkielet CSS Tailwind tylko dla CSS dla zastępczego interfejsu użytkownika. Kształty okręgów, prostokątów i linii tekstowych z animacją pulsacyjną. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Statystyka
Statystyka CSS Tailwind wyłącznie do wyświetlania metryk. Miejsca na wartość, etykietę, opis i ikony. Responsywny układ siatki. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Status
Kropkowy wskaźnik stanu CSS Tailwind tylko dla CSS z wariantami kolorów podstawowego, sukcesu, ostrzeżenia i błędu. Rozmiary xs-xl. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Kroki
Tylko CSS Kroki CSS Tailwind dla wieloetapowych kreatorów i wskaźników postępu. Układ poziomy i pionowy, warianty kolorystyczne na stopień. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Powierzchnia
Powierzchnia CSS Tailwind obsługująca tylko CSS, umożliwiająca zastosowanie tematycznych kolorów tła i tekstu do kontenera. Wszystkie warianty kolorystyczne. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Zamieniać
Zamiana CSS Tailwind tylko w CSS do przełączania między dwoma elementami. Odwracaj, obracaj i zanikaj animacje, bez JavaScript. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Tabela
Tabela CSS Tailwind tylko dla CSS z paskami zebry, kompaktowymi i domyślnymi rozmiarami, przypiętymi kolumnami i stanami najechania wierszem. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Zakładki
Zakładki CSS Tailwind tylko w formacie CSS z wariantami w stylu obramowania, uniesionego, w pudełku i pigułki. Stan aktywny i rozmiary, nie wymaga JavaScript. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Etykietka
Tag CSS Tailwind (chip) zawierający wyłącznie CSS z wariantami kolorystycznymi, miękkim stylem i wymiennym przyciskiem. Rozmiary xs-lg. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Obszar tekstowy
Obszar tekstowy CSS Tailwind obejmujący wyłącznie CSS z podstawowymi, dodatkowymi, akcentowanymi i semantycznymi wariantami kolorów. Rozmiary xs-xl, fason duch. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Oś czasu
Oś czasu CSS Tailwind, zawierająca wyłącznie chronologiczne listy wydarzeń. Układ pionowy z ikonami, treścią i miejscami na linie łączące. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Toast
Toast CSS Tailwind tylko dla CSS do pozycjonowania powiadomień — u góry, u dołu, na początku, na końcu i na środku. Brak JavaScriptu dla układu. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Dźwignia kolankowa
Przełącznik CSS Tailwind CSS z podstawowymi, dodatkowymi, akcentowanymi i semantycznymi wariantami kolorów. Rozmiary xs-xl. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Etykietka
Etykietka CSS Tailwind zawierająca wyłącznie CSS z rozmieszczeniem u góry, u dołu, po lewej i prawej stronie. Warianty kolorystyczne, nie wymaga JavaScript. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Często zadawane pytania
Czy wszystkie komponenty Frutjam zawierają wyłącznie CSS?
Tak — zdecydowana większość komponentów to czysty CSS bez JavaScript. Przyciski, plakietki, karty, formularze, alerty, moduły, szuflady, karty i inne elementy działają ze zwykłym kodem HTML i CSS. Niewielka liczba komponentów, które nie mają natywnego odpowiednika w HTML (pozycjonowanie tostów, filtrowanie comboboxów, kontrolki karuzeli) oferuje opcjonalne lekkie pomoce JS, ale układ i styl CSS w ogóle nie wymagają JavaScript.
Czy komponenty Frutjam współpracują z Django, HTMX i Laravel?
Tak — Frutjam jest niezależny od frameworka. Ponieważ każdy komponent obsługuje wyłącznie CSS, działa z dowolnym stosem renderowanym przez serwer. Szablony Django, HTMX, Laravel Blade, Rails ERB, zwykły HTMX — jeśli potrafisz wyprowadzać HTMX, Frutjam działa. Bez reakcji, bez potoku kompilacji, bez konieczności stosowania frameworka JavaScript.
Czy komponenty WCAG są dostępne?
Tak — kontrast WCAG AA jest gwarantowany na każdym komponencie. Każda para kolorów ( – kolor podstawowy / – kolor podstawowy itp.) jest ręcznie dostrajana w OKLCH, aby spełnić wymagania kontrastu WCAG AA. W całym tekście używane są semantyczne elementy HTML — natywny <dialog> dla modali, <details> dla akordeonów i w razie potrzeby odpowiednie atrybuty ARIA.
Jak komponenty Frutjam wypadają w porównaniu z DaisyUI?
Obie są bibliotekami komponentów CSS Tailwind obsługującymi tylko CSS, ale Frutjam jest zbudowany specjalnie dla Tailwind CSS v4, wykorzystuje tokeny kolorów OKLCH z gwarantowanymi parami kontrastu WCAG AA i dostarcza darmowy serwer MCP (Cherry) do integracji edytora AI – odpowiednik DaisyUI (Blueprint) jest płatny. Frutjam udostępnia również jawne pary tokenów on-{color} zamiast obliczać kolory pierwszego planu w czasie wykonywania.
Czy muszę instalować coś poza CSS Tailwind?
Tylko jedna dodatkowa linia. Dodaj @plugin "frutjam"; do swojego pliku CSS po @import "tailwindcss"; i zainstaluj poprzez npm i -D frutjam. To wszystko — żadnych wtyczek PostCSS, żadnej konfiguracji JavaScript, żadnego osobnego arkusza stylów do importowania. Wszystkie komponenty są dostępne natychmiast i automatycznie aktualizowane przez Tailwind.
Czy mogę używać komponentów Frutjam z Reactem lub Next.js?
Tak. Ponieważ Frutjam działa tylko w CSS, możesz używać komponentów w ten sam sposób na każdym stosie — wystarczy zastosować nazwy klas. W przypadku kilku komponentów korzystających z kontroli JavaScript (modalne otwieranie/zamykanie, toast, karuzela) Frutjam dostarcza opcjonalne haki React (frutjam/react), które otaczają natywne wywołania DOM bez dodatkowych zależności.