Instalacja

Zainstaluj Frutjam, bibliotekę interfejsu CSS Tailwind obsługującą wyłącznie CSS, w ciągu kilku minut. Dwa importy, zero JavaScript, dostępne komponenty WCAG od razu po wyjęciu z pudełka. Współpracuje z Django, HTMX, Laravel, React i dowolnym projektem Tailwind CSS v4.

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 & React — opcjonalny, niewymagany

Frutjam jest native-first i CSS-first. 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.

Wanilia 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()

Haki reagujące — frutjam/react

Thin React otacza te same natywne wywołania DOM. Każdy hak zwraca ref, który dołączysz 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 →