インストール

CSS のみの Frutjam UI ライブラリを Tailwind CSS v4、UnoCSS を使用してインストールするか、ビルド ステップをまったく使用せずにインストールします。 65 以上のアクセス可能なコンポーネント、JavaScript なし、WCAG AA。 Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

インストール

npm i -D frutjam

次に、設定に一致する以下の行を選択します。どれも同じコンポーネントを提供します。

テイルウィンド CSS v4

作業が必要です 追い風 CSS プロジェクト、プラス ノード そしてnpm。 Frutjam には Tailwind 4 が必要です。

フルーツジャムを追加 input.css と @plugin 指令：

1
2

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

それが全体のセットアップです。 65 以上のコンポーネントはすべてすぐに利用でき、Tailwind はマークアップで使用するコンポーネントのみを出荷します。

UnoCSS

Frutjam にはプリセットが同梱されているため、Tailwind プラグインと同じように、UnoCSS は使用するコンポーネントのみを生成します。

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

すべてのクラスは Tailwind での場合と同様に機能し、バリアントも同様に機能します。

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>

追加 presetAttributify() そしてコンポーネント名は属性になり、各値はそのバリアントとして扱われます。

1
2

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

2行目に必要なのは transformerVariantGroup() 括弧構文については。次のような属性に注意してください btn は有効な HTML ではないため、マークアップを検証する場合は、クラス フォームまたは UnoCSS の un- 接頭語。

オプション

リンクコンポーネントには 1 行の設定が必要です

UnoCSS の扱い link CSS のバリアントとして :link 疑似クラス、およびそのデフォルトの区切り文字には以下が含まれます。 -。それで link-2xl 「」と読みます2xl、未訪問時」をクラス名としてではなく、何も生成されません。このコンポーネントのみに影響し、 link-* 修飾子。

UnoCSS にコロンのみで分割するように指示します。

1
2
3
4

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

または、プレフィックスを使用して、他のものを置きます link 名前の前に:

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

他のすべてのコンポーネントは影響を受けません。 link 57 個の中で名前が疑似クラスと衝突する唯一のクラスです。

ユーティリティエンジンなし

Frutjam は Tailwind を使用して構築されていますが、コンポーネントはカスタム プロパティを読み取る通常の CSS にコンパイルされます。プロジェクトでユーティリティ エンジンをまったく使用しない場合は、プラグインの代わりにスタイルシートをインポートします。

import 'frutjam/css';

それが全体のセットアップです。すべてのコンポーネントクラスが機能し、テーマが切り替わります data-theme いつものように、他には何も必要ありません。これは gzip 圧縮された 30 KB で、基本スタイル、テーマ、および 65 以上のすべてのコンポーネントが含まれています。

代わりに、必要なものだけを取り込みます。

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

または、ビルドステップをまったく行わない場合:

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

ビルドステップがありません

タグをドロップしてマークアップの作成を開始します。これは、すべてのコンポーネントを同梱するため、運用環境ではなく、プロトタイプまたは作成しないページに使用してください。

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

同じページで Tailwind のユーティリティを試してみるには、Tailwind のブラウザ ビルドを隣に追加します。

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 と React: オプション、必須ではありません

Frutjam は ネイティブ ファーストかつ CSS ファーストです。ボタン、バッジ、カード、フォーム、アラートなどのコンポーネントの大部分は、純粋な HTML と CSS で動作し、JavaScript は必要ありません。次のようなネイティブ HTML 要素 <dialog>, <details>、 そして <input type="checkbox"> ブラウザーがすでにサポートしている対話性を処理します。すべてのコンポーネントはすぐに 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 呼び出しを囲む Thin 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.

次のステップ

インストールしたら、試してみてください ボタンコンポーネント Frutjam の動作を確認したり、全体を探索したりするには コンポーネントライブラリ.

Frutjam の CSS ファーストのアプローチの背後にある考え方を理解したいですか? なぜこのように構築したかをお読みください→