Instalasi

Instal Frutjam, pustaka Tailwind CSS UI khusus CSS, dalam hitungan menit. Dua impor, tanpa JavaScript, komponen yang dapat diakses WCAG secara langsung. Bekerja dengan Django, HTMX, Laravel, React, dan proyek Tailwind CSS v4 apa pun.

How to install Frutjam UI library in Tailwind CSS project?

Make sure you have a working Tailwind CSS project installed, as well as Node and NPM on your computer. Frutjam works with Tailwind version 4.

Install frutjam as a Node package by running the following command:

npm i -D frutjam

Add Frutjam to your input.css using the @plugin directive:

1
2

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

JavaScript & React — Opsional, Tidak Wajib

Frutjam adalah native-first dan CSS-first. Sebagian besar komponen — tombol, lencana, kartu, formulir, peringatan, dan lainnya — berfungsi dengan HTMX dan CSS murni, tanpa memerlukan JavaScript. Elemen HTMX asli seperti <dialog>, <details>, dan <input type="checkbox"> menangani interaktivitas yang sudah didukung oleh browser. Semua komponen adalah WCAG AA yang dapat diakses langsung dan bekerja dengan Django, HTMX, Laravel, React, Next.js, dan tumpukan apa pun.

A small number of components have no native HTML equivalent (toast notifications, combobox filtering, carousel controls). For those cases only, Frutjam ships lightweight optional helpers.

Vanila JS — frutjam/js

Pembantu modul ES framework-agnostic untuk komponen yang membutuhkannya. Lampirkan ke elemen DOM apa pun — tidak diperlukan kerangka kerja.

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

Kait Reaksi — frutjam/react

Pembungkus React yang tipis di sekitar panggilan DOM asli yang sama. Setiap hook mengembalikan ref yang Anda lampirkan ke elemen dan metode untuk mengendalikannya — tidak ada ketergantungan tambahan selain React itu sendiri.

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

Available for: useModal, useDrawer, useCollapsible, useTooltip, useTabs, useToast, useCarousel, useCombobox.

Using a CDN

Use the CDN version of the frutjam UI library for fast and easy integration without local setup. Use this CDN version of frutjam only for development purposes, not in production.

1
2

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

Next Steps

Setelah terinstal, coba komponen button untuk melihat Frutjam beraksi, atau jelajahi perpustakaan komponen lengkap.

Ingin memahami pemikiran di balik pendekatan Frutjam yang mengutamakan CSS? Baca mengapa kami membuatnya seperti ini →