Instalasi

Instal pustaka Frutjam UI khusus CSS dengan Tailwind CSS v4, UnoCSS, atau tanpa langkah pembuatan sama sekali. 65+ komponen yang dapat diakses, tanpa JavaScript, WCAG AA. Bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

Memasang

npm i -D frutjam

Kemudian pilih baris di bawah yang cocok dengan pengaturan Anda. Masing-masing memberi Anda komponen yang sama.

CSS penarik v4

Anda membutuhkan yang berfungsi CSS penarik proyek, ditambah simpul dan npm. Frutjam membutuhkan Tailwind 4.

Tambahkan Frutjam ke Anda input.css dengan @plugin direktif:

1
2

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

Itulah keseluruhan pengaturannya. Keseluruhan 65+ komponen segera tersedia, dan Tailwind hanya mengirimkan komponen yang digunakan markup Anda.

UnoCSS

Frutjam mengirimkan preset, jadi UnoCSS hanya menghasilkan komponen yang Anda gunakan, sama seperti plugin Tailwind.

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()],
});

Setiap kelas berfungsi seperti pada Tailwind, begitu pula variannya:

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>

Menambahkan presetAttributify() dan nama komponen menjadi atribut, dengan setiap nilai diperlakukan sebagai variannya:

1
2

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

Kebutuhan baris kedua transformerVariantGroup() untuk sintaks braket. Perhatikan bahwa atribut seperti btn bukan HTML yang valid, jadi jika Anda memvalidasi markup Anda, gunakan formulir kelas atau UnoCSS un- awalan.

Pilihan

Komponen tautan memerlukan satu baris konfigurasi

suguhan UnoCSS link sebagai varian, untuk CSS :link kelas semu, dan pemisah defaultnya termasuk -. Jadi link-2xl dibaca sebagai "2xl, ketika belum dikunjungi" bukan sebagai nama kelas, dan tidak ada yang dihasilkan. Ini hanya mempengaruhi komponen ini, dan hanya link-* pengubah.

Entah memberitahu UnoCSS untuk membagi pada titik dua saja:

1
2
3
4

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

Atau gunakan awalan, yang menempatkan sesuatu selain link di depan nama:

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

Setiap komponen lainnya tidak terpengaruh. link adalah satu-satunya dari 57 yang namanya bertabrakan dengan kelas semu.

Tidak ada mesin utilitas

Frutjam dibuat dengan Tailwind, tetapi komponennya dikompilasi ke CSS biasa yang membaca properti khusus. Jika proyek Anda tidak menggunakan mesin utilitas sama sekali, impor stylesheet dan bukan plugin:

import 'frutjam/css';

Itulah keseluruhan pengaturannya. Setiap kelas komponen berfungsi, tema diganti data-theme seperti biasa, dan tidak ada lagi yang diperlukan. Ini berukuran 30 KB gzip dan membawa gaya dasar, baik tema dan semua 65+ komponen.

Tarik hanya apa yang Anda perlukan saja:

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

Atau tanpa langkah pembuatan sama sekali:

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

Tidak ada langkah membangun

Masukkan tag dan mulailah menulis markup. Gunakan ini untuk prototipe atau halaman yang tidak Anda buat, bukan untuk produksi, karena ini mengirimkan setiap komponen.

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

Untuk bereksperimen dengan utilitas Tailwind di halaman yang sama, tambahkan versi browser Tailwind di sampingnya:

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 dan React: opsional, tidak wajib

Frutjam adalah yang mengutamakan native dan mengutamakan CSS. Sebagian besar komponen: tombol, lencana, kartu, formulir, peringatan, dan banyak lagi: berfungsi dengan HTML dan CSS murni, tidak memerlukan JavaScript. Elemen HTML asli seperti <dialog>, <details>, Dan <input type="checkbox"> menangani interaktivitas di mana browser sudah mendukungnya. Semua komponen adalah WCAG AA yang dapat diakses langsung dan bekerja dengan Django, HTMX, Laravel, React, Next.js, dan tumpukan apa pun.

Sejumlah kecil komponen tidak memiliki padanan HTML asli (notifikasi toast, pemfilteran kotak kombo, kontrol carousel). Hanya untuk kasus-kasus tersebut, Frutjam mengirimkan pembantu opsional yang ringan.

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 kait mengembalikan a ref Anda melampirkan elemen dan metode untuk mengendalikannya, tidak ada ketergantungan tambahan di luar 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>
    </>
  )
}

Tersedia untuk: useModal, useDrawer, useCollapsible, useTooltip, useTabs, useToast, useCarousel, useCombobox.

Langkah Selanjutnya

Setelah terinstal, coba komponen tombol untuk melihat Frutjam beraksi, atau jelajahi selengkapnya perpustakaan komponen.

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