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.
什麼是插件？
Frutjam 外掛程式透過附加元件、實用程式或整合來擴充基礎庫。每個外掛程式都是獨立的包，您可以選擇加入 - 僅安裝您需要的內容，保持 CSS 包的精簡。
獨立包
每個插件都是一個獨立的 npm 套件。將其與 Frutjam 一起安裝，並在 CSS 中使用單一 @plugin 指令進行註冊。
與框架無關
插件適用於任何堆疊 - Django、HTMX、Laravel、React 或純 HTML。不需要特定於框架的包裝器。
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.