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.

Zobacz na GitHubie Rozpocznij

Wynik PageSpeed

100/100

Wydajność · Dostępność · SEO

Licencja

MIT

Za darmo na zawsze, bez ograniczeń

Zależności JS

Czysty CSS, nie wymaga JavaScript

Dostępność

WCAG

Zgodny z AA/AAA od razu po wyjęciu z pudełka

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.

@import "tailwindcss";
@import "frutjam";

Krok 3

Używaj czystych komponentów

Pisz klasy semantyczne zamiast długich łańcuchów użytkowych.

<button class="btn btn-primary">
    Get Started
</button>

Pełny przewodnik instalacji

Zobacz to w akcji

Prawdziwe komponenty, prawdziwy kod — skopiuj i wyślij.

Pikolak

<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>

Zobacz kod

Odznaki i etykiety

Primary Active Pending Error Default

<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>

Zobacz kod

Rozmiary przycisków

<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>

Zobacz kod

Karta

Card Title

A clean, accessible card component ready to use in any project.

<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>

Zobacz kod

Przeglądaj wszystkie komponenty

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.

Websites run faster, provide a better user experience, and have higher search ranks. In today's AI-driven web, faster sites are prioritized—AI tools frequently scan websites in real time, and they prefer fast, efficient pages that don't waste computational resources. Build smarter with a future-ready UI library.

Performance

Dostępność

Best Practices

SEO

frutjam.com on PageSpeed

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.

How to Use

For Modern Frameworks

Your framework is fast. Keep it that way.

Next.js, Svelte, and Vue are engineered for blazing performance and SEO — server rendering, minimal JS, instant hydration. But the moment you add a heavy component library full of bloated JavaScript for something as simple as a modal, you trade away everything those frameworks promise.

Frutjam is CSS-first and native-first by design. No JavaScript bundles. No runtime overhead. No layout shift. Your framework's performance ceiling becomes your actual performance — not just a theoretical one.

Zero Layout Shift

Pure CSS components render instantly with the page — no JavaScript needed to paint the UI. Your Cumulative Layout Shift (CLS) stays at 0, preserving that perfect PageSpeed score.

No JS Overhead

Every KB of JavaScript your framework saves from bundle-splitting, Frutjam never adds back. Buttons, cards, modals, badges — all in CSS. Your Time to Interactive stays fast.

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.

0ms

JS Execution for UI

Layout Shifts (CLS)

W3C

Valid Markup

AA+

WCAG Contrast

😎

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.

// 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>

Result:

<button type="button" class="btn">Button</button>

Zobacz kod

Themes & Customization

Frutjam uses simple CSS variables for theming. Change one variable and every component updates instantly — no rebuild, no class changes.

/* 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

Primary, secondary, accent, error, success, warning and all base shades — all via a single CSS variable each.

Border Radius

--radius-base scales all components at once — change one variable, every element updates.

Typografia

Font family, size scale, and line height — set your type system once and all components inherit it.

Spacing & Sizing

Component padding and size variants — use built-in size modifiers or override spacing tokens globally.

Component Library

A growing collection of prebuilt, accessible components for every use case.

See All Components

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.

Most editors break the standard web workflow. MarkdownEditor embraces it — sitting directly on top of a <textarea> so your backend never knows anything changed. It just works with form method="POST", standard DOM access, and every server framework out of the box.

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.

No data binding needed — works with form method="POST" out of the box
Standard access — read and write with element.value like any input
Backend agnostic — PHP, Django, Node.js, Laravel, Rails — all just read a plain string
~116 KB — hybrid WYSIWYG + plain mode, RTL, image upload, live preview, zero CSS conflicts

View Full Documentation

Live demo — try it out:

Drop-in replacement — one class, one line of JS. Backend unchanged.

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

Configure server uploads via API. Images go directly to your CDN — no Base64 bloat in your database, no SEO penalty, no memory-heavy payloads.

High Performance

Debounced preview updates, cached style calculations, and conflict-free keyboard handling. Handles thousands of lines without input lag — and all editor styles are fully scoped so it lives safely alongside any CSS framework.

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 connects Frutjam directly to your AI editor. Get accurate component code, correct class names, and up-to-date docs — without copy-pasting from the browser.

Try Cherry MCP

Correct Frutjam class names, every time

Up-to-date component docs in your AI context

Works with Claude Code, Cursor, Windsurf, and more

Często zadawane pytania

Everything you need to know about Frutjam.

Is Frutjam free to use?

Yes — Frutjam is MIT licensed and completely free. Use it in personal projects, client work, and commercial products with no restrictions, no attribution required.

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?

No — Frutjam builds on top of Tailwind. Think of it as a layer that adds semantic component classes (.btn, .card, .badge) while keeping all Tailwind utility classes available alongside it.

Do I need JavaScript to use Frutjam?

No JavaScript required. Frutjam is pure CSS — components like buttons, cards, badges, and forms work entirely without a JS runtime. For interactive patterns like modals or dropdowns, it pairs well with lightweight libraries like Alpine.js or HTMX.

Can I use Frutjam with React, Vue, or Angular?

Yes — Frutjam is completely framework-agnostic. It works with any templating system or JS framework including React, Vue, Angular, Svelte, Next.js, Nuxt, Laravel, Django, and plain HTML. Just import the CSS and use the classes.

Is Frutjam accessible for screen readers?

Yes. Frutjam follows WAI-ARIA guidelines with appropriate roles, keyboard navigation support, and WCAG AA/AAA color contrast out of the box — making it accessible to all users without extra configuration.

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?

Override CSS variables in your stylesheet — set --color-primary, --font-base, --radius-base, and more. Every component picks up the change instantly without a rebuild or any class changes in your HTML.

From the Blog

Thoughts on building Frutjam and the CSS-first approach to UI.

View All Posts

frutjam CSS-first Tailwind UI library vs bloated JS libraries — PageSpeed 100

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.

Contribute on GitHub Read the Docs