Plugins
Extend Frutjam with CSS-only Tailwind CSS plugins. Zero JavaScript, WCAG accessible, framework-agnostic. Works with Django, HTMX, Laravel, and any framework.
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.
Markdown editor
Markdown text editor plugin that transforms a native textarea into a full editing suite. WYSIWYG and plain Markdown modes, live preview, RTL support, dark mode. Works with Django, HTMX, Laravel, React, and any stack.
Plugin là gì?
Các plugin Frutjam mở rộng thư viện cơ sở với các thành phần, tiện ích hoặc tích hợp bổ sung. Mỗi plugin là một gói độc lập mà bạn có thể chọn tham gia — chỉ cài đặt những gì bạn cần, duy trì gói CSS của bạn gọn gàng.
Gói độc lập
Mỗi plugin là một gói npm độc lập. Cài đặt nó cùng với Frutjam và đăng ký nó bằng một lệnh @plugin duy nhất trong CSS của bạn.
Bất khả tri về khung
Các plugin hoạt động với mọi ngăn xếp - Django, HTMX, Laravel, React hoặc HTML đơn giản. Không yêu cầu trình bao bọc theo khung cụ thể.
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.