Frutjam is a lightweight, modern UI library built for speed. It provides prebuilt Tailwind CSS components that are completely free to use — pure CSS, no JavaScript required. Works with Vite, PostCSS, Next.js, or any framework.
Frutjam is a UI component library built on top of Tailwind CSS, designed to help developers build accessible, SEO-friendly, and W3C-compliant interfaces—fast. With a wide selection of prebuilt components and themes, Frutjam makes it easy to hit the ground running or fully customize your design system.
- 🧱 Prebuilt UI Components — Plug-and-play components to save time
- 🎨 Customizable Themes — Built-in themes plus custom theme injection
- 🏷️ Independent Prefix Support — Scope Frutjam classes behind their own prefix (e.g.
fj-btn), separate from Tailwind’s prefix - ♿ Accessibility-First — Follows accessibility best practices
- 🔍 SEO-Friendly — Semantic markup optimized for search engines
- ✅ W3C Standards — Clean, valid HTML structure
- ⚙️ Built for Tailwind CSS — Seamless integration with your Tailwind setup
npm install frutjamIn your main stylesheet:
@import "tailwindcss";
@plugin "frutjam";<button class="btn btn-primary">
Launch App
</button>Configure the prefix directly in your CSS file — no postcss.config.js changes needed:
@import "tailwindcss";
@plugin "frutjam" {
prefix: fj;
}Or via postcss.config.js if you prefer:
module.exports = {
plugins: {
"frutjam": { prefix: "fj" },
"@tailwindcss/postcss": {}
}
}<button class="fj-btn fj-btn-primary">
Launch App
</button>All options can be set in CSS via @plugin "frutjam" { ... } or in postcss.config.js:
| Option | Default | Description |
|---|---|---|
prefix |
"" |
Prefix all Frutjam class names (e.g. fj → fj-btn) |
reset |
true |
Include browser reset and element defaults |
root |
":root" |
Remap CSS var declarations to a custom selector (e.g. ":host") |
logs |
true |
Show build-time console output |
include |
[] |
Only include specific components/utilities |
exclude |
[] |
Exclude specific components/utilities |
Define themes directly in your stylesheet using @layer theme:
@layer theme {
[data-theme="blueberry"] {
--scheme-color: light;
--color-primary: oklch(60% 0.2 220);
--color-on-primary: oklch(98% 0.01 220);
--color-base: oklch(98% 0.01 220);
--color-on-base: oklch(20% 0.02 220);
}
}Apply any theme with a data-theme attribute:
<body data-theme="blueberry">
...
</body>That’s it — you’re ready to build with Frutjam components!
For full documentation and live interactive previews, visit our official site: 👉 frutjam
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the repo
- Create your Feature Branch (git checkout -b feature/AmazingFeature)
- Commit your Changes (git commit -m 'Add some AmazingFeature')
- Push to the Branch (git push origin feature/AmazingFeature)
- Open a Pull Request
Please check the contributing guidelines before starting.
Distributed under the MIT License. See MIT License for more information.
Thank you for choosing the Frutjam UI Library – Happy coding!
If you like this project, consider giving it a star! 🌟
