Installation

Install Frutjam, the CSS-only Tailwind CSS UI library, in minutes. Two imports, zero JavaScript, WCAG accessible components out of the box. Works with Django, HTMX, Laravel, React, and any Tailwind CSS v4 project.

Jak zainstalować bibliotekę Frutjam UI w projekcie CSS Tailwind?

Upewnij się, że masz zainstalowany działający projekt Tailwind CSS, a także Node i NPM na swoim komputerze. Frutjam współpracuje z Tailwindem w wersji 4.

Zainstaluj frutjam jako pakiet Node, uruchamiając następującą komendę:

npm i -D frutjam

Dodaj Frutjama do swojego input.css za pomocą dyrektywy @plugin:

1
2

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

JavaScript & Reaguj — opcjonalne, niewymagane

Frutjam jest najpierw natywny i CSS. Zdecydowana większość komponentów — przycisków, plakietek, kart, formularzy, alertów i innych — działa w czystym HTMX i CSS, bez konieczności używania JavaScript. Natywne elementy HTMX, takie jak <dialog>, <details> i <input type="checkbox"> obsługują interaktywność tam, gdzie przeglądarki już ją obsługują. Wszystkie komponenty są dostępne w formacie WCAG AA od razu po wyjęciu z pudełka i współpracują z Django, HTMX, Laravel, React, Next.js i dowolnym stosem.

Niewielka liczba komponentów nie ma natywnego odpowiednika HTML (powiadomienia tostowe, filtrowanie comboboxów, kontrolki karuzeli). Tylko w takich przypadkach Frutjam dostarcza lekkich opcjonalnych pomocników.

Waniliowy JS — frutjam/js

Pomocnicy modułów ES niezależny od platformy dla komponentów, które ich potrzebują. Dołącz do dowolnego elementu DOM — nie jest wymagana żadna struktura.

1
2
3
4
5
6

import { createModal } from 'frutjam/js'

const modal = createModal(document.getElementById('myModal'))
modal.open()   // calls showModal()
modal.close()  // calls close()
modal.toggle()

Hooki reagujące — frutjam/react

Thin React otacza te same natywne wywołania DOM. Każdy hak zwraca ref, który dołączasz do elementu i metody jego kontrolowania — żadnych dodatkowych zależności poza samym Reactem.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import { useModal } from 'frutjam/react'

export default function App() {
  const modal = useModal()
  return (
    <>
      <button onClick={modal.open}>Open</button>
      <dialog ref={modal.ref} className="modal">...</dialog>
    </>
  )
}

Dostępne dla: useModal, useDrawer, useCollapsible, useTooltip, useTabs, useToast, useCarousel, useCombobox.

Korzystanie z CDN

Skorzystaj z wersji CDN biblioteki frutjam UI, aby uzyskać szybką i łatwą integrację bez konfiguracji lokalnej. Używaj tej wersji frutjamu CDN wyłącznie do celów programistycznych, a nie produkcyjnych.

1
2

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam@2.2.2/dist/frutjam.min.css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Następne kroki

Po zainstalowaniu wypróbuj komponent przycisku, aby zobaczyć Frutjam w akcji, lub poznaj pełną bibliotekę komponentów.

Chcesz zrozumieć tok myślenia stojący za podejściem Frutjam opartym na CSS? Przeczytaj, dlaczego zbudowaliśmy to w ten sposób →