Open Source · Licencja MIT · Zawsze bezpłatna
Przystępna biblioteka komponentów CSS Tailwind, obsługująca tylko CSS, do szybkiego programowania
Frutjam to niesamowicie szybka biblioteka interfejsu użytkownika typu open source stworzona dla programistów, którym zależy na dostępności, standardach i bezproblemowej integracji z CSS Tailwind.
Zgodny z W3C, przyjazny dla SEO i łatwy w użyciu.
Wysoce konfigurowalny
Obsługiwane przez klasy narzędzi CSS Tailwind
Frutjam udostępnia gotowe do użycia klasy komponentów, pozostawiając jednocześnie możliwość dostosowania każdego narzędzia Tailwind. Z łatwością zmieniaj odstępy, kolory, układ i interakcje dzięki klasom narzędziowym na komponentach Frutjam.
Konfigurowalne komponenty
Każdy komponent Frutjam został zaprojektowany tak, aby akceptował narzędzia Tailwind, dzięki czemu możesz modyfikować style bez pisania niestandardowego CSS.
Kontrola na pierwszym miejscu
Użyj klas Tailwind, takich jak text-lg, px-6 i bg-base-200, aby dostosować komponenty w ciągu kilku minut.
Rozpocznij w ciągu kilku sekund
Dwa importy i jesteś gotowy do budowania. Żadnych narzędzi do kompilacji, żadnej konfiguracji, żadnego środowiska wykonawczego.
Krok 1
Zainstaluj przez npm
Dodaj Frutjam do swojego projektu za pomocą jednego polecenia.
npm install frutjam |
Krok 2
Zaimportuj do swojego CSS
Dodaj Tailwind i Frutjam do swojego arkusza stylów.
1 2 | @import "tailwindcss"; @import "frutjam"; |
Krok 3
Używaj czystych komponentów
Pisz klasy semantyczne zamiast długich łańcuchów użytkowych.
1 2 3 | <button class="btn btn-primary"> Get Started </button> |
Zobacz to w akcji
Prawdziwe komponenty, prawdziwy kod — skopiuj i wyślij.
Pikolak
1 2 3 4 5 6 | <div class="flex flex-wrap gap-2"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-outline">Outline</button> <button type="button" class="btn btn-soft btn-success">Success</button> <button type="button" class="btn btn-soft btn-error">Danger</button> </div> |
Odznaki i etykiety
1 2 3 4 5 6 7 | <div class="flex flex-wrap gap-2"> <span class="badge badge-primary">Primary</span> <span class="badge badge-success">Active</span> <span class="badge badge-warning">Pending</span> <span class="badge badge-error">Error</span> <span class="badge">Default</span> </div> |
Rozmiary przycisków
1 2 3 4 5 6 | <div class="flex flex-wrap items-center gap-2"> <button type="button" class="btn btn-primary btn-xs">XSmall</button> <button type="button" class="btn btn-primary btn-sm">Small</button> <button type="button" class="btn btn-primary">Base</button> <button type="button" class="btn btn-primary btn-lg">Large</button> </div> |
Karta
1 2 3 4 5 6 7 8 9 10 | <div class="card card-sm card-outline"> <div class="card-content"> <h4 class="card-title">Card Title</h4> <p>A clean, accessible card component ready to use in any project.</p> <div class="flex gap-2 mt-3"> <button type="button" class="btn btn-primary btn-sm">Action</button> <button type="button" class="btn btn-outline btn-sm">Cancel</button> </div> </div> </div> |
Dlaczego warto korzystać z biblioteki Frutjam UI?
Frutjam to bezpłatna biblioteka interfejsu użytkownika typu open source, zawierająca wyłącznie CSS, zbudowana przy użyciu Tailwind CSS v4, która koncentruje się na dostępności i szybszym rozwoju. Nie wymaga skomplikowanej konfiguracji JavaScript ani ogromnych pakietów JS — co czyni go lekką alternatywą DaisyUI dla zespołów, które potrzebują komponentów zgodnych z WCAG przy zerowym nakładzie JavaScript.
Aby rozpocząć, po prostu dodaj @import „frutjam” do swojego arkusza stylów. Frutjam eliminuje potrzebę długich list klas CSS Tailwind w kodzie HTML; po prostu używaj czystych, semantycznych klas, aby łatwo budować komponenty. Z łatwością dostosowuj motywy za pomocą prostych zmiennych CSS, a wszystkie komponenty aktualizują się natychmiast.
Standardy W3C
Czysty, prawidłowy kod HTML dla nowoczesnych aplikacji internetowych.
Dostępność przede wszystkim
Każdy komponent został zbudowany z myślą o a11y.
Kontrast kolorów
Komponenty przechodzą od razu testy kontrastu kolorów WCAG AA/AAA.
Przyjazny dla SEO
Znaczniki semantyczne dla lepszej widoczności w wyszukiwarkach.
Przyjazny dla programistów
Proste, intuicyjne API i łatwa integracja.
Najpierw CSS i HTML
Brak blokady JavaScript — styl i struktura są na pierwszym miejscu.
Obsługa CSS Tailwind
Doskonale współpracuje z istniejącym przepływem pracy w Tailwind.
Wsparcie RTL
W pełni kompatybilny z językami pisanymi od prawej do lewej.
Czuły
Wygląda świetnie na każdym urządzeniu i każdym rozmiarze ekranu.
Aktywnie utrzymywany
Nowe komponenty, aktualizacje i wsparcie społeczności.
Profesjonalne motywy
Przełączaj się między trybami jasnym i ciemnym lub twórz własne.
Gotowe układy i komponenty
Gotowe do użycia klocki do każdego projektu.
Otwarte źródło
Licencjonowany przez MIT i kierowany przez społeczność.
Wsparcie wtyczek
Rozszerz Frutjam za pomocą przydatnych wtyczek, takich jak edytor tekstu Markdown.
Zmniejsz rozmiar DOM
A large number of nested or unnecessary elements can cause rendering to slow down. Simplify your component structure and improve performance and maintainability.
100/100 on Google PageSpeed Insights
Achieve a perfect 100 in Performance, Accessibility, Best Practices, and SEO using Frutjam UI library. This website is built entirely with Frutjam UI and achieved an overall score of 100/100 on Google PageSpeed Insights.
Strony internetowe działają szybciej, zapewniają lepszą obsługę użytkownika i mają wyższe pozycje w wynikach wyszukiwania. W dzisiejszej sieci opartej na sztucznej inteligencji priorytetem są szybsze witryny — narzędzia sztucznej inteligencji często skanują witryny internetowe w czasie rzeczywistym i preferują szybkie, wydajne strony, które nie marnują zasobów obliczeniowych. Twórz mądrzej dzięki przygotowanej na przyszłość bibliotece interfejsu użytkownika.
Pure CSS, no JavaScript needed. Framework-agnostic and fully compatible everywhere.
Frutjam UI library does not require huge JavaScript bundles since it is written in pure CSS. This makes your project lightweight and optimized for faster load times and smoother performance. It works perfectly with any web framework or backend, whether you're using React, Vue, Angular, Next.js, Django, HTMX, Laravel, or just plain HTMX.
For Modern Frameworks
Your framework is fast. Keep it that way.
Next.js, Svelte i Vue zostały zaprojektowane z myślą o niesamowitej wydajności i SEO — renderowanie serwerów, minimalny JS, natychmiastowe nawodnienie. Ale w momencie, gdy dodasz obszerną bibliotekę komponentów pełną nadętego JavaScriptu do czegoś tak prostego jak moduł modalny, tracisz wszystko, co obiecują te frameworki.
Frutjam z założenia jest zorientowany na CSS i natywny. Brak pakietów JavaScript. Brak narzutu na czas wykonania. Brak zmiany układu. Pułap wydajności Twojego frameworka staje się rzeczywistą wydajnością — a nie tylko teoretyczną.
Zero Layout Shift
Czyste komponenty CSS renderują się natychmiast wraz ze stroną — do malowania interfejsu użytkownika nie jest wymagana obsługa JavaScript. Twoje skumulowane przesunięcie układu (CLS) pozostaje na poziomie 0, zachowując doskonały wynik PageSpeed.
No JS Overhead
Każdy KB kodu JavaScript, który Twój framework zapisuje przed dzieleniem pakietów, Frutjam nigdy nie dodaje ponownie. Przyciski, karty, modały, plakietki – wszystko w CSS. Twój czas na interaktywność jest szybki.
SEO That Delivers
Semantic HTML, W3C-valid markup, and WCAG color contrast out of the box. Search engines read clean structure. Pair a modern framework with Frutjam and your pages rank and perform.
No more ugly HTML, fewer class names, easily maintainable, and faster development.
No More Messy Classes: One Class Does It All. Instead of writing a clutter of classes every time for every element, every page, and every project, again and again, use Frutjam component class names for easy maintenance and scaling and faster development without the headache of clutter classes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // Styling a simple button in Tailwind css clutter of utility class <button class="bg-gray-100 text-gray-900 text-sm px-3.5 border font-semibold duration-200 py-2 transition-all hover:border-gray-300 hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 inline-flex gap-2 rounded-sm active:border-gray-300 active:bg-gray-200 active:shadow-none text-center align-middle cursor-pointer border-gray-200 dark:border-gray-700 dark:bg-neutral-700 dark:text-gray-300 dark:hover:border-gray-950 dark:hover:bg-gray-950 dark:focus-visible:outline-gray-200 dark:active:border-gray-950 dark:active:bg-gray-900"> Button </button> // Styling a simple button in frutjam component class <button class="btn"> Button </button> |
<button type="button" class="btn">Button</button> |
Themes & Customization
Frutjam używa prostych zmiennych CSS do tworzenia motywów. Zmień jedną zmienną, a każdy komponent zostanie natychmiast zaktualizowany — bez przebudowy, bez zmian klas.
1 2 3 4 5 6 7 8 9 10 11 12 13 | /* Override the default theme in your CSS */ :root { --color-primary: oklch(55% 0.2 250); --color-primary-content: #fff; --radius-base: 0.5rem; --font-base: "Inter", sans-serif; } /* Dark mode overrides */ [data-theme="dark"] { --color-base-100: oklch(15% 0.01 250); --color-base-content: oklch(90% 0.01 250); } |
What you can customize
Zabarwienie
Podstawowy, wtórny, akcent, błąd, sukces, ostrzeżenie i wszystkie odcienie podstawowe — wszystko za pośrednictwem jednej zmiennej CSS.
Border Radius
--radius-base skaluje wszystkie komponenty na raz — zmień jedną zmienną, a każdy element zostanie zaktualizowany.
Typografia
Rodzina czcionek, skala rozmiaru i wysokość linii — ustaw swój system czcionek raz, a wszystkie komponenty go odziedziczą.
Spacing & Sizing
Dopełnienie komponentów i warianty rozmiaru — użyj wbudowanych modyfikatorów rozmiaru lub globalnie zastąp tokeny odstępów.
Component Library
A growing collection of prebuilt, accessible components for every use case.
Buttons & Forms
Button variants, inputs, checkboxes, selects, and full form layouts.
Modals & Dialogs
Accessible modal dialogs, drawers, and confirmation prompts.
Navigation
Navbars, sidebars, breadcrumbs, and tab navigation.
Cards & Layouts
Card variants, grid systems, and page layout skeletons.
Alerts & Toasts
Status alerts, notification banners, and inline feedback messages.
Badges & Tags
Status badges, category tags, and label components.
Lists & Tables
Data tables, ordered/unordered lists, and definition lists.
Plugins
Markdown editor, syntax highlighter, and more useful extensions.
Community Plugin
Loved by backend developers. Native-first Markdown editor.
Większość redaktorów łamie standardowy przepływ pracy w sieci. MarkdownEditor obsługuje to — siedzi bezpośrednio na <textarea>, więc Twój backend nigdy nie będzie wiedział, że coś się zmieniło. Działa po prostu z form method="POST", standardowym dostępem DOM i każdym frameworkiem serwerowym.
Replace a plain <textarea> with one line of JS and your users get a 10× better experience while your Django, Laravel, or PHP controller stays exactly as it was.
-
Nie jest wymagane wiązanie danych — współpracuje z metodą
form="POST"od razu po wyjęciu z pudełka -
Standardowy dostęp — odczyt i zapis za pomocą
element.valuejak każde wejście - Backend agnostic — PHP, Django, Node.js, Laravel, Rails — wszystko po prostu czyta zwykły ciąg znaków
- ~116 KB — hybrydowy WYSIWYG + tryb zwykły, RTL, przesyłanie obrazów, podgląd na żywo, zero konfliktów CSS
Demo na żywo — wypróbuj:
Zamiana typu drop-in — jedna klasa, jedna linia JS. Backend bez zmian.
Native Form Integration
Enhances a standard <textarea>. Submit with a normal <form> and access content via request.POST['name']. No preventDefault(), no FormData construction.
Advanced Image Upload
Skonfiguruj przesyłanie serwerów za pośrednictwem interfejsu API. Obrazy trafiają bezpośrednio do Twojej sieci CDN — bez rozdęcia bazy danych Base64, bez kar za SEO i bez obciążania pamięci.
High Performance
Odrzucone aktualizacje podglądu, obliczenia stylu w pamięci podręcznej i bezkonfliktowa obsługa klawiatury. Obsługuje tysiące linii bez opóźnień wejściowych — a wszystkie style edytora mają pełny zakres, dzięki czemu bezpiecznie współpracują z dowolnym frameworkiem CSS.
How does Frutjam compare?
See how Frutjam stacks up against plain Tailwind CSS, Bootstrap, and DaisyUI as a free, accessible alternative.
| Feature | Frutjam | DaisyUI | Plain Tailwind | Bootstrap |
|---|---|---|---|---|
| CSS-only (no JavaScript required) | ✓ | ✓ | ✓ | Częściowy |
| Semantic component classes | ✓ | ✓ | ✗ | ✓ |
| WCAG AA contrast guaranteed on every component | ✓ | Manual | Manual | Częściowy |
| Works alongside Tailwind utilities | ✓ | ✓ | ✓ | ✗ |
| CSS variables theming | ✓ | ✓ | ✓ | Limited |
| 100/100 PageSpeed achievable | ✓ | ✓ | Varies | Varies |
| RTL support | ✓ | Częściowy | Częściowy | ✓ |
| Framework agnostic (Django, HTMX, Laravel) | ✓ | ✓ | ✓ | ✓ |
| Theme via plain CSS variables, no config file | ✓ | Częściowy | Manual | ✗ |
| AI editor integration (MCP / context) | ✓ Free | Paid | ✗ | ✗ |
Integracja edytora AI
Using Claude Code, Cursor, or Copilot?
Cherry MCP łączy Frutjam bezpośrednio z edytorem AI. Uzyskaj dokładny kod komponentu, prawidłowe nazwy klas i aktualną dokumentację — bez kopiowania i wklejania z przeglądarki.
Try Cherry MCPCzęsto zadawane pytania
Everything you need to know about Frutjam.
Is Frutjam free to use?
Tak — Frutjam ma licencję MIT i jest całkowicie darmowy. Używaj go w projektach osobistych, pracy z klientami i produktach komercyjnych bez ograniczeń i bez konieczności podawania źródła.
Is Frutjam suitable for commercial projects?
Yes. Frutjam is open source under the MIT license, which permits free use in both personal and commercial products without any royalties or restrictions.
Does Frutjam replace Tailwind CSS?
Nie — Frutjam opiera się na Tailwind. Pomyśl o tym jak o warstwie, która dodaje klasy komponentów semantycznych (.btn, .card, .badge), jednocześnie zachowując dostępność wszystkich klas narzędzi Tailwind.
Do I need JavaScript to use Frutjam?
Nie wymaga JavaScriptu. Frutjam to czysty CSS — komponenty takie jak przyciski, karty, plakietki i formularze działają całkowicie bez środowiska wykonawczego JS. W przypadku interaktywnych wzorców, takich jak modały lub listy rozwijane, dobrze łączy się z lekkimi bibliotekami, takimi jak Alpine.js lub HTMX.
Can I use Frutjam with React, Vue, or Angular?
Tak — Frutjam jest całkowicie niezależny od frameworka. Działa z dowolnym systemem szablonów lub frameworkiem JS, w tym React, Vue, Angular, Svelte, Next.js, Nuxt, Laravel, Django i zwykłym HTML. Po prostu zaimportuj CSS i użyj klas.
Is Frutjam accessible for screen readers?
Tak. Frutjam jest zgodny z wytycznymi WAI-ARIA z odpowiednimi rolami, obsługą nawigacji za pomocą klawiatury i kontrastem kolorów WCAG AA/AAA od razu po wyjęciu z pudełka, dzięki czemu jest dostępny dla wszystkich użytkowników bez dodatkowej konfiguracji.
Does PageSpeed improve when using Frutjam?
Yes. Frutjam's CSS-first approach avoids render-blocking JavaScript entirely. Combined with W3C-valid markup, proper color contrast, and native HTML semantics, it contributes directly to better Core Web Vitals and a 100/100 PageSpeed score.
How do I customize colors, fonts, and radius?
Zastąp zmienne CSS w swoim arkuszu stylów — ustaw --color-primary, -font-base, -radius-base i więcej. Każdy komponent natychmiast rozpoznaje zmianę, bez przebudowy lub jakichkolwiek zmian klas w kodzie HTML.
From the Blog
Thoughts on building Frutjam and the CSS-first approach to UI.
The Best DaisyUI Alternative: CSS-Only Tailwind Components Without JavaScript
Why developers are switching from DaisyUI to Frutjam — a CSS-only Tailwind CSS component library that passes WCAG AA by default and requires zero JavaScript.
Why I Stopped Using JavaScript-Heavy UI Libraries (And Built a CSS-First Tailwind Component Library)
Achieve 100% PageSpeed scores by default. A guide to building high-performance, RTL-ready platforms using native HTML5 and CSS-first components.
Open Source & Free Forever
Join the Community
Frutjam is open source and community-driven. Every component, fix, and idea from the community makes it better for everyone.
Found a bug? Have a feature request? Want to contribute a component or improve the docs? We'd love to have you.