Cài đặt

Cài đặt Frutjam, thư viện giao diện người dùng CSS Tailwind chỉ dành cho CSS, trong vài phút. Hai thành phần nhập, không có JavaScript, WCAG có thể truy cập được ngay lập tức. Hoạt động với Django, HTMX, Laravel, React và bất kỳ dự án Tailwind CSS v4 nào.

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";

React JavaScript & - Tùy chọn, Không bắt buộc

Frutjam là native-first và CSS-first. Phần lớn các thành phần — nút, huy hiệu, thẻ, biểu mẫu, cảnh báo, v.v. — hoạt động với HTML và CSS thuần túy, không cần JavaScript. Các phần tử HTML gốc như <dialog>, <details> và <input type="checkbox"> xử lý tính tương tác ở những nơi trình duyệt đã hỗ trợ tính tương tác đó. Tất cả các thành phần đều có thể truy cập WCAG AA ngay lập tức và hoạt động với Django, HTMX, Laravel, React, Next.js và bất kỳ ngăn xếp nào.

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.

Vanilla JS — frutjam/js

Trình trợ giúp mô-đun ES không xác định khung cho các thành phần cần chúng. Đính kèm với bất kỳ phần tử DOM nào - không cần khung.

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

Móc phản ứng - frutjam/react

Trình bao bọc React mỏng xung quanh các lệnh gọi DOM gốc giống nhau. Mỗi hook trả về một ref mà bạn gắn vào phần tử và các phương thức để kiểm soát nó - không có phần phụ thuộc bổ sung nào ngoài chính React.

 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.2/dist/frutjam.min.css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Next Steps

Once installed, try the button component to see Frutjam in action, or explore the full component library.

Want to understand the thinking behind Frutjam's CSS-first approach? Read why we built it this way →