---
title: "Overview"
type: guide
version: "2.0.4"
doc_version: "2.0.4"
status: stable
date: 2026-04-21
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Get started with Frutjam, a standards-first UI library. Install the Tailwind plugin and build accessible, semantic interfaces in minutes."
url: https://frutjam.com/docs/overview
---

# Getting Started with Frutjam

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.