Getting Started with Frutjam

Frutjam is a standards-first UI component library built for accessibility, performance, and clean HTML. Install the package, add the plugin to your Tailwind config, and start building with semantic, WCAG-compliant components designed to scale with your project.

There's no complicated setup — it uses the same configuration as Tailwind CSS, so you can stick with what you already know. And if you're familiar with Bootstrap, the component names will feel intuitive and easy to remember.

You can use Tailwind CSS variant prefixes like dark:, sm:, lg:, xl:, rtl:, and ltr: with any of our utility classes.

Modern UI Engineering with a Speed-First Framework

Frutjam is an open-source Tailwind CSS v4 UI library — a high-level abstraction designed to facilitate rapid web development. Think of it as a toolkit that transforms raw utility classes into semantic, production-ready components—allowing you to build modern interfaces with significantly less code.

What problems does it solve?

Most developers face utility fatigue spending hours writing long chains of classes for basic elements like buttons and inputs. Frutjam eliminates that friction by providing a plug-and-play ecosystem.

• Redundant Boilerplate: Instead of reinventing the wheel for every project, you get prebuilt components that handle focus states, hover transitions, and responsive behaviors out of the box
• Performance Bloat: Unlike heavy JavaScript frameworks, Frutjam prioritizes a "Pure CSS" approach, ensuring your application remains lightweight and fast
• Compliance Hurdles: Building accessible and SEO-friendly interfaces is complex. The library uses semantic markup and clean HTML to ensure your site is inherently W3C-compliant

Frutjam is for you if you:

• Are tired of writing thousands of utility class names repeatedly
• Need to ship accessible, SEO-friendly landing pages and SaaS apps in record time
• Want a consistent design system that is fully compatible across any environment?
• Prefer a lightweight, framework-agnostic solution with zero mandatory JavaScript dependencies

Core Features for Rapid Development

The toolkit follows a copy, paste, and build philosophy, offering everything needed for professional-grade frontend engineering

• Extensive Component Library: Includes essential elements like Navbars, Modals, Accordions, and refined Data Tables
• Pre-assembled Blocks: Save hours with layout blocks for Pricing sections, Headers, and Hero areas
• Berry Theming System: Switch between built-in themes like Snowberry (light) and Darkberry (dark), or create your own using OKLCH CSS variables
• Accessibility-First Design: Every component follows best practices for ARIA roles and keyboard navigation. All color pairs are hand-tuned OKLCH values verified to pass WCAG AA contrast — not auto-computed guesses.
• Framework Agnostic: Works seamlessly whether you are using React, Next.js, Vue, or simple static HTML

Technical Efficiency

By using semantic class names, you can reduce your HTML size significantly compared to standard utility-first workflows. This results in cleaner, more maintainable codebases that are easier for teams to manage in the long term. The library is built strictly on top of Tailwind CSS, ensuring you keep all the customization power of the utility engine while gaining the speed of a component-based system.