メインコンテンツへスキップ

プラグイン

CSS 専用の Tailwind CSS プラグインを使用して Frutjam を拡張します。 JavaScript はゼロ、WCAG にアクセス可能、フレームワークに依存しない。 Django、HTMX、Laravel、その他のフレームワークで動作します。

Frutjam plugins extend the core library with additional components and integrations beyond standard UI elements. Each plugin is an independent npm package — install only what your project needs and register it with a single @plugin directive alongside your main Frutjam import. Plugins integrate seamlessly with the existing theming system, inheriting your CSS variables and WCAG AA color tokens automatically. Framework-agnostic by design, plugins work with Django, HTMX, Laravel, React, and any Tailwind CSS v4 project.

マークダウンエディタ

ネイティブのテキストエリアを完全な編集スイートに変換するマークダウン テキスト エディター プラグイン。 WYSIWYG およびプレーン Markdown モード、ライブ プレビュー、RTL サポート、ダーク モード。 Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

What are plugins?

Frutjam plugins extend the base library with additional components, utilities, or integrations. Each plugin is an independent package you can opt into — install only what you need, keep your CSS bundle lean.

Independent packages

Each plugin is a standalone npm package. Install it alongside Frutjam and register it with a single @plugin directive in your CSS.

Framework-agnostic

Plugins work with any stack — Django, HTMX, Laravel, React, or plain HTML. No framework-specific wrappers required.

How do I install a Frutjam plugin?

Install the plugin via npm and add a @plugin directive to your CSS file. For example: npm i -D frutjam-plugin-name, then add @plugin "frutjam-plugin-name"; below @plugin "frutjam"; in your CSS. That's it — no JavaScript config required.

Are plugins CSS-only?

It depends on the plugin. Pure UI plugins are CSS-only. Some plugins — like the markdown editor — are JavaScript-based because their functionality inherently requires scripting. Each plugin page clearly documents whether JavaScript is required.