Installation

Installieren Sie die reine CSS-Frutjam-UI-Bibliothek mit Tailwind CSS v4, UnoCSS oder ohne Build-Schritt. Über 65 barrierefreie Komponenten, kein JavaScript, WCAG AA. Funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Installieren

npm i -D frutjam

Wählen Sie dann die Zeile unten aus, die zu Ihrem Setup passt. Jeder liefert Ihnen die gleichen Komponenten.

Rückenwind CSS v4

Sie benötigen eine funktionierende Rückenwind-CSS Projekt, zzgl Knoten und npm. Für Frutjam ist Rückenwind 4 erforderlich.

Fügen Sie Frutjam zu Ihrem hinzu input.css mit dem @plugin Direktive:

1
2

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

Das ist der ganze Aufbau. Alle über 65 Komponenten sind sofort verfügbar und Tailwind versendet nur diejenigen, die Ihr Markup verwendet.

UnoCSS

Frutjam liefert eine Voreinstellung aus, sodass UnoCSS nur die von Ihnen verwendeten Komponenten generiert, genau wie das Tailwind-Plugin.

1
2
3
4
5
6
7

// uno.config.js
import { defineConfig, presetWind4 } from 'unocss';
import { presetFrutjam } from 'frutjam/unocss';

export default defineConfig({
  presets: [presetWind4(), presetFrutjam()],
});

Jede Klasse funktioniert wie unter Tailwind, und das gilt auch für Varianten:

1
2
3

<button class="btn btn-error btn-xl">Delete</button>
<button class="md:btn-error">Red from the medium breakpoint up</button>
<div class="hover:card-primary">Fills on hover</div>

Hinzufügen presetAttributify() und der Komponentenname wird zu einem Attribut, wobei jeder Wert als Variante davon behandelt wird:

1
2

<button btn="error xl">Delete</button>
<button btn="md:(error xl)">Red and large from the medium breakpoint up</button>

Die zweite Zeile braucht transformerVariantGroup() für die Klammersyntax. Beachten Sie, dass ein Attribut wie btn ist kein gültiges HTML. Wenn Sie Ihr Markup validieren, verwenden Sie das Klassenformular oder UnoCSS un- Präfix.

Optionen

Die Link-Komponente benötigt eine Konfigurationszeile

UnoCSS behandelt link als Variante für das CSS :link Pseudoklasse und ihre Standardtrennzeichen umfassen -. Also link-2xl wird gelesen als „2xl, wenn nicht besucht“ und nicht als Klassenname, und es wird nichts generiert. Es betrifft nur diese Komponente und nur die link-* Modifikatoren.

Entweder weisen Sie UnoCSS an, nur nach Doppelpunkten aufzuteilen:

1
2
3
4

export default defineConfig({
  separators: [':'],
  presets: [presetWind4(), presetFrutjam()],
});

Oder verwenden Sie ein Präfix, das etwas anderes als einfügt link vor dem Namen:

presets: [presetWind4(), presetFrutjam({ prefix: 'fj' })],   // fj-link-2xl

Alle anderen Komponenten bleiben davon unberührt. link ist der einzige der 57, dessen Name mit einer Pseudoklasse kollidiert.

Kein Nutzmotor

Frutjam wird mit Tailwind erstellt, aber die Komponenten werden zu gewöhnlichem CSS kompiliert, das benutzerdefinierte Eigenschaften liest. Wenn Ihr Projekt überhaupt keine Utility-Engine verwendet, importieren Sie das Stylesheet anstelle des Plugins:

import 'frutjam/css';

Das ist der ganze Aufbau. Jede Komponentenklasse funktioniert, die Themen wechseln mit data-theme wie gewohnt, es ist nichts anderes erforderlich. Es ist 30 KB groß und enthält die Basisstile, beide Themen und alle über 65 Komponenten.

Ziehen Sie stattdessen nur das ein, was Sie brauchen:

1
2
3
4

import 'frutjam/css/base';              // tokens and reset, always needed
import 'frutjam/css/components/button';
import 'frutjam/css/components/card';
import 'frutjam/css/themes/darkberry';  // optional

Oder ganz ohne Build-Schritt:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam@2/dist/frutjam.components.css">

Kein Build-Schritt

Fügen Sie ein Tag ein und beginnen Sie mit dem Markup. Verwenden Sie dies für einen Prototyp oder eine Seite, die Sie nicht erstellen, nicht für die Produktion, da alle Komponenten mitgeliefert werden.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam@2/dist/frutjam.components.css">

Um auf derselben Seite mit den Dienstprogrammen von Tailwind zu experimentieren, fügen Sie daneben den Browser-Build von Tailwind hinzu:

1
2

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

JavaScript und React: optional, nicht erforderlich

Frutjam ist Native-First und CSS-First. Die überwiegende Mehrheit der Komponenten: Schaltflächen, Abzeichen, Karten, Formulare, Benachrichtigungen und mehr: funktionieren mit reinem HTML und CSS, kein JavaScript erforderlich. Native HTML-Elemente wie <dialog>, <details>, Und <input type="checkbox"> Bewältigen Sie die Interaktivität dort, wo Browser sie bereits unterstützen. Alle Komponenten sind sofort einsatzbereit und funktionieren mit Django, HTMX, Laravel, React, Next.js und jedem Stack.

Für eine kleine Anzahl von Komponenten gibt es kein natives HTML-Äquivalent (Toast-Benachrichtigungen, Combobox-Filterung, Karussell-Steuerelemente). Nur für diese Fälle liefert Frutjam leichte optionale Helfer mit.

Vanille JS: frutjam/js

Framework-unabhängige ES-Modulhelfer für die Komponenten, die sie benötigen. An ein beliebiges DOM-Element anhängen, kein Framework erforderlich.

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

Reaktionshaken: frutjam/react

Thin React-Wrapper um dieselben nativen DOM-Aufrufe. Jeder Hook gibt a zurück ref Sie fügen dem Element und Methoden hinzu, um es zu steuern, keine zusätzlichen Abhängigkeiten über React selbst hinaus.

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

Verfügbar für: useModal, useDrawer, useCollapsible, useTooltip, useTabs, useToast, useCarousel, useCombobox.

Nächste Schritte

Probieren Sie nach der Installation Folgendes aus Schaltflächenkomponente um Frutjam in Aktion zu sehen oder alles zu erkunden Komponentenbibliothek.

Möchten Sie den Gedanken hinter Frutjams CSS-First-Ansatz verstehen? Lesen Sie, warum wir es so gebaut haben →