Build Accessible, Modern UIs - Fast.
Frutjam is a blazing-fast, open-source UI library built for developers who care about accessibility, standards, and seamless integration with Tailwind CSS.
W3C-compliant, SEO-friendly, and easy to use.
Why use Frutjam UI library?
Frutjam is a UI library built with Tailwind CSS that focus on faster development and ease of use. It doesn't require complicated JavaScript configuration or huge JS bundles since it is framework-agnostic.
Just add @import "frutjam" to your stylesheet to get started. Frutjam removes the need for lengthy Tailwind class lists in your HTML; just use clean, semantic classes to build components easily. Easily customise themes just using simple CSS variables, and all components update instantly.
W3C Standards
Clean, valid HTML for modern web apps.
Accessibility First
Every component is built with a11y in mind.
Color Contrast
Components pass WCAG color contrast checks out of the box.
SEO Friendly
Semantic markup for better search engine visibility.
Developer Friendly
Simple, intuitive API and easy integration.
CSS & HTML First
No JavaScript lock-in - style and structure come first.
Tailwind CSS Support
Works perfectly with your Tailwind workflow.
RTL Support
Fully compatible with right-to-left languages.
Responsive
Looks great on any device, any screen size.
Actively Maintained
New features, updates, and community support.
Professional Themes
Switch between light and dark modes, or create your own.
Prebuilt Layouts & Components
Ready-to-use building blocks for any project.
Open Source
MIT licensed and community-driven.
Plugin Support
Extend Frutjam with useful plugins like the Markdown Text Editor.
Reduce DOM Size
A large number of nested or unnecessary elements can cause rendering to slow down. Simplify your components structure and improve performance and maintainability.
100/100 on Google PageSpeed Insights
Achieve a perfect 100 in Performance, Accessibility, Best Practices, and SEO using Frutjam UI library. This website is built entirely with Frutjam UI and achieved an overall score of 100/100 on Google PageSpeed Insights.
Websites run faster, provide a better user experience, and have higher search ranks. In today's AI-driven web, faster sites are prioritized—AI tools frequently scan websites in real time, and they prefer fast, efficient pages that don't waste computational resources. Build smarter with a future-ready UI library.
Pure CSS, no JavaScript needed. Framework-agnostic and fully compatible everywhere.
Frutjam UI library does not require huge JavaScript bundles since it is written in pure CSS. This makes your project lightweight and optimized for faster load times and smoother performance. It works perfectly with any web framework, whether you're using React, Vue, Angular, or just plain HTML.
No more ugly HTML, fewer class names, easily maintainable, and faster development.
No More Messy Classes: One Class Does It All. Instead of writing a clutter of classes every time for every element, every page, and every project, again and again, use Frutjam component class names for easy maintenance and scaling and faster development without the headache of clutter classes.
// Styling a simple button in Tailwind css clutter of utility class<button class="bg-gray-100 text-gray-900 text-sm px-3.5 border font-semibold duration-200 py-2 transition-all hover:border-gray-300 hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 inline-flex gap-2 rounded-sm active:border-gray-300 active:bg-gray-200 active:shadow-none text-center align-middle cursor-pointer border-gray-200 dark:border-gray-700 dark:bg-neutral-700 dark:text-gray-300 dark:hover:border-gray-950 dark:hover:bg-gray-950 dark:focus-visible:outline-gray-200 dark:active:border-gray-950 dark:active:bg-gray-900"> Button </button>// Styling a simple button in frutjam component class<button class="btn"> Button </button>// Result
Features
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 for rapid development. Buttons, forms, modals, navigation, and more - all customizable and accessible.
Customizable Themes
Switch between a variety of professional themes, with full support for dark and light modes. Easily create your own to match your brand.
Accessibility & SEO
Every component is built to be accessible (a11y) and SEO-friendly, using semantic HTML and ARIA best practices.
Tailwind CSS Integration
Built from the ground up for Tailwind CSS. Use your existing Tailwind setup or start fresh - Frutjam fits right in.
RTL & Responsive
Support for right-to-left languages and responsive layouts out of the box.
Useful Plugins
Extend your UI with plugins like our Markdown Text Editor and more.
Example Components
Themes & Customization
Multiple ready-to-use themes, easy dark/light mode toggle, and custom theme creation.
Community & Contributing
Frutjam is open source and community-driven. Found a bug? Have a feature request? Want to contribute?
Contribute on GitHub