설치

CSS 전용 Tailwind CSS UI 라이브러리인 Frutjam을 몇 분 안에 설치하세요. 두 개의 가져오기, 제로 JavaScript, WCAG 액세스 가능 구성요소를 즉시 사용할 수 있습니다. Django, HTMX, Laravel, React 및 모든 Tailwind CSS v4 프로젝트에서 작동합니다.

Tailwind CSS 프로젝트에 Frutjam UI 라이브러리를 설치하는 방법은 무엇입니까?

컴퓨터에 작동 중인 Tailwind CSS 프로젝트와 Node 및 NPM이 설치되어 있는지 확인하세요. Frutjam은 Tailwind 버전 4에서 작동합니다.

다음 명령을 실행하여 frutjam을 노드 패키지로 설치합니다.

npm i -D frutjam

@plugin 지시문을 사용하여 input.css에 Frutjam을 추가합니다.

1
2

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

JavaScript & React — 선택 사항, 필수는 아님

Frutjam은 네이티브 우선 및 CSS 우선입니다. 버튼, 배지, 카드, 양식, 알림 등 대부분의 구성 요소는 JavaScript가 필요 없이 순수 HTML 및 CSS로 작동합니다. <dialog>, <details> 및 <input type="checkbox">와 같은 기본 HTML 요소는 브라우저가 이미 지원하는 상호작용을 처리합니다. 모든 구성 요소는 기본적으로 WCAG AA에 액세스할 수 있으며 Django, HTMX, Laravel, React, Next.js 및 모든 스택에서 작동합니다.

소수의 구성 요소에는 기본 HTML과 동등한 기능(토스트 알림, 콤보 상자 필터링, 캐러셀 컨트롤)이 없습니다. 이러한 경우에만 Frutjam은 가벼운 선택적 도우미를 제공합니다.

바닐라 JS — frutjam/js

프레임워크에 구애받지 않는 ES 모듈 도우미가 필요한 구성 요소를 지원합니다. DOM 요소에 연결하세요. 프레임워크가 필요하지 않습니다.

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

반응 후크 — frutjam/react

동일한 기본 DOM 호출을 둘러싼 얇은 React 래퍼. 각 후크는 요소에 연결한 ref와 이를 제어하는 ​​메서드를 반환합니다. 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>
    </>
  )
}

사용 가능 대상: useModal, useDrawer, useCollapsible, useTooltip, useTabs, useToast, useCarousel, useCombobox.

CDN 사용

로컬 설정 없이 빠르고 쉽게 통합하려면 frutjam UI 라이브러리의 CDN 버전을 사용하세요. 이 CDN 버전의 frutjam은 프로덕션이 아닌 개발 목적으로만 사용하십시오.

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>

다음 단계

설치한 후 버튼 구성요소를 사용해 Frutjam의 실제 작동 모습을 보거나 전체 구성 요소 라이브러리를 탐색해 보세요.

Frutjam의 CSS 우선 접근 방식에 대한 생각을 이해하고 싶으십니까? 이런 방식으로 구축한 이유를 읽어보세요 →