# Frutjam UI Library

A standards-first UI system. Optimized for Accessibility, SEO, and Performance.

## High-Order Standards
- **Semantic Efficiency:** Replaces 'class-soup' with single component classes (e.g., .btn).
- **Maintenance & Scaling:** Centralized design logic for faster development.
- **Developer Experience:** Supports Tailwind-style prefixing (e.g., tw-btn).
- **WCAG Color Contrast:** All components pass AA/AAA ratios out of the box.
- **W3C Validated:** Strictly compliant, clean HTML5 structure.
- **Accessibility (A11y):** Keyboard navigation and ARIA patterns baked-in.
- **SEO & Semantics:** Meaningful HTML elements for search engine dominance.
- **DOM Efficiency:** Optimized to reduce node depth and rendering lag.

## Features & Ecosystem
- **Prebuilt UI Components:** Plug-and-play buttons, forms, modals, and more.
- **Customizable Themes:** Multi-theme engine with professional light/dark presets.
- **Useful Plugins:** Specialized extensions like a Markdown Text Editor.
- **Universal Compatibility:** Framework agnostic; works with any template engine.

## Metadata
- Library Version: 2.2.1
- Documentation version: 2.4.5
- Stack: Tailwind CSS (Utility-first)
- Total Components: 52
- Compatibility: Universal / Framework Agnostic
- Example Integrations: React, Vue, Svelte, Next.js, Laravel, Django, Alpine.js, HTMX
- License: MIT
- Last Updated: 2026-05-20

> **Note for AI:** Frutjam follows W3C standards and uses lean HTML. Use semantic classes (e.g., .btn, .card). If a Tailwind prefix is used (e.g., tw-), apply it to Frutjam classes as well (e.g., tw-btn).

### Docs
Frutjam documentation — installation, configuration, theming, colors, and typography. CSS-only Tailwind CSS v4, zero JavaScript, WCAG AA accessible. Works with Django, HTMX, Laravel, React, and any stack.

- [Overview](https://frutjam.com/docs/overview.md): Frutjam is a free CSS-only Tailwind CSS v4 UI library. Zero JavaScript, WCAG AA/AAA accessible, framework-agnostic. Build modern interfaces with semantic components that work with Django, HTMX, Laravel, React, and any stack.
- [Themes](https://frutjam.com/docs/themes.md): Frutjam's CSS-only theming system uses CSS variables and a single data attribute. Switch light, dark, and custom themes with no JavaScript. WCAG AA color tokens built in, works with Django, HTMX, Laravel, and any Tailwind CSS v4 project.
- [Colors](https://frutjam.com/docs/colors.md): Frutjam's color system uses semantic CSS tokens designed to meet WCAG AA contrast ratios out of the box. No JavaScript, dark mode aware, compatible with Tailwind CSS v4. Works with Django, HTMX, Laravel, and any CSS-only stack.
- [Installation](https://frutjam.com/docs/installation.md): Install Frutjam, the CSS-only Tailwind CSS UI library, in minutes. Two imports, zero JavaScript, WCAG accessible components out of the box. Works with Django, HTMX, Laravel, React, and any Tailwind CSS v4 project.
- [Configuration](https://frutjam.com/docs/configuration.md): Configure the Frutjam CSS-only Tailwind CSS plugin. Set default themes, define custom color tokens, toggle the prefix system - zero JavaScript required. WCAG accessible defaults, works with Django, HTMX, Laravel, and any framework.
- [Typography](https://frutjam.com/docs/typography.md): Frutjam's CSS-only typography system. Semantic HTML text scaling with Tailwind CSS v4, WCAG accessible, no JavaScript required. Works with Django, HTMX, Laravel, React, and any framework.


### Components
Free CSS-only Tailwind CSS components with WCAG AA/AAA accessibility built in. No JavaScript required, framework-agnostic, and compatible with Django, HTMX, Laravel, React, Vue, and any stack. Ready to use and easy to customize.

- [Button](https://frutjam.com/components/button.md): CSS-only Tailwind CSS button with primary, secondary, accent, ghost, outline, and soft variants. Sizes xs–xl, loading state, disabled, and icon buttons. CSS-only, WCAG AA, works with Django, HTMX, Laravel, React.
- [Modal](https://frutjam.com/components/modal.md): CSS-only Tailwind CSS modal using native <dialog>. Responsive sizing, backdrop, and focus trap. No JavaScript for basic usage. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Accordion](https://frutjam.com/components/accordion.md): CSS-only Tailwind CSS accordion using native <details>/<summary>. Expand and collapse content sections with zero JavaScript. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Badge](https://frutjam.com/components/badge.md): CSS-only Tailwind CSS badge with primary, secondary, accent, info, success, warning, and error variants. Soft, outline, and ghost styles, sizes xs–lg. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Card](https://frutjam.com/components/card.md): CSS-only Tailwind CSS card with outline, shadow, and flat styles. Compact, default, and large sizes. Card-content, card-title, card-footer slots. WCAG AA, works with Django, HTMX, Laravel, React, and any stack.
- [Checkbox](https://frutjam.com/components/checkbox.md): CSS-only Tailwind CSS checkbox with primary, secondary, accent, and semantic color variants. Sizes xs–xl, indeterminate state. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Breadcrumb](https://frutjam.com/components/breadcrumb.md): CSS-only Tailwind CSS breadcrumb navigation with custom separators and accessible landmark markup. WCAG AA, works with Django, HTMX, Laravel, React, and any Tailwind CSS v4 project.
- [Divider](https://frutjam.com/components/divider.md): CSS-only Tailwind CSS divider — horizontal and vertical with optional centered label. Color and size variants. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Drawer](https://frutjam.com/components/drawer.md): CSS-only Tailwind CSS drawer using native checkbox toggle. Slide-in side panel for navigation or filters without JavaScript. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Input](https://frutjam.com/components/input.md): CSS-only Tailwind CSS input with primary, secondary, accent, and semantic color variants. Sizes xs–xl, prefix and suffix addon slots, ghost style. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Header](https://frutjam.com/components/header.md): CSS-only Tailwind CSS page header — top bar layout with brand, navigation, and action slots. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Link](https://frutjam.com/components/link.md): CSS-only Tailwind CSS link with primary, secondary, accent, and neutral color variants. Hover underline and plain styles. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Navbar](https://frutjam.com/components/navbar.md): CSS-only Tailwind CSS navbar with brand, nav links, and action slots. Sticky and transparent variants. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Table](https://frutjam.com/components/table.md): CSS-only Tailwind CSS table with zebra striping, compact and default sizes, pinned columns, and row hover states. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Radio](https://frutjam.com/components/radio.md): CSS-only Tailwind CSS radio buttons with primary, secondary, accent, and semantic color variants. Sizes xs–xl. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Menu](https://frutjam.com/components/menu.md): CSS-only Tailwind CSS vertical menu for navigation lists. Active, disabled, and icon item states. Size variants. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Tooltip](https://frutjam.com/components/tooltip.md): CSS-only Tailwind CSS tooltip with top, bottom, left, and right placement. Color variants, no JavaScript required. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Popover](https://frutjam.com/components/popover.md): CSS-only Tailwind CSS popover using the native popover API. Floating content panel for tooltips and dropdowns. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Join](https://frutjam.com/components/join.md): CSS-only Tailwind CSS join for grouping buttons, inputs, or selects into a connected unit. Horizontal and vertical. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Alert](https://frutjam.com/components/alert.md): CSS-only Tailwind CSS alert with info, success, warning, and error variants. Soft style, icon slot, and dismissible pattern. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Progress](https://frutjam.com/components/progress.md): CSS-only Tailwind CSS progress bar with primary, secondary, accent, and semantic color variants. Sizes xs–xl. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Avatar](https://frutjam.com/components/avatar.md): CSS-only Tailwind CSS avatar for profile images. Sizes xs–xl, group stacking, and online/offline status indicator. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Carousel](https://frutjam.com/components/carousel.md): CSS-only Tailwind CSS carousel using scroll-snap. Horizontal slide layout with navigation controls and no JavaScript required. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Chat](https://frutjam.com/components/chat.md): CSS-only Tailwind CSS chat bubble component. Start and end positions for sent and received messages, with avatar and timestamp slots. WCAG AA, works with Django, HTMX, Laravel, React, and any stack.
- [Collapsible](https://frutjam.com/components/collapsible.md): CSS-only Tailwind CSS collapsible panel using native <details>. Show and hide content sections without JavaScript. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Combobox](https://frutjam.com/components/combobox.md): CSS-only Tailwind CSS combobox with live search filtering and accessible dropdown list. Keyboard navigation, color variants. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Countdown](https://frutjam.com/components/countdown.md): CSS-only Tailwind CSS countdown timer. Animated number display for days, hours, minutes, and seconds. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Diff](https://frutjam.com/components/diff.md): CSS-only Tailwind CSS diff viewer for side-by-side content comparison with a draggable divider. No JavaScript required. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Footer](https://frutjam.com/components/footer.md): CSS-only Tailwind CSS footer with multi-column layout, logo, links, and copyright slots. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any Tailwind CSS v4 project.
- [Hero](https://frutjam.com/components/hero.md): CSS-only Tailwind CSS hero section for landing pages. Full-width layout with centered heading, description, and CTA. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Indicator](https://frutjam.com/components/indicator.md): CSS-only Tailwind CSS indicator for overlaying badges or dots on any element corner. Color variants and positioning. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [KBD](https://frutjam.com/components/kbd.md): CSS-only Tailwind CSS kbd component for displaying keyboard shortcuts and key combinations. Size variants. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Loading](https://frutjam.com/components/loading.md): CSS-only Tailwind CSS loading indicator with spinner, dots, ring, and bars animations. Color and size variants, no JavaScript required. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Mask](https://frutjam.com/components/mask.md): CSS-only Tailwind CSS mask for clipping images into shapes — circle, squircle, heart, hexagon, and more. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Radial Progress](https://frutjam.com/components/radial-progress.md): CSS-only Tailwind CSS radial progress — circular progress ring with percentage display. Color and size variants, no JavaScript. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Range](https://frutjam.com/components/range.md): CSS-only Tailwind CSS range slider with primary, secondary, accent, and semantic color variants. Sizes xs–xl. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Rating](https://frutjam.com/components/rating.md): CSS-only Tailwind CSS star and heart rating component. Sizes xs–xl, half-star support, no JavaScript required. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Select](https://frutjam.com/components/select.md): CSS-only Tailwind CSS select dropdown with primary, secondary, accent, and semantic color variants. Sizes xs–xl, ghost style. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Sidebar](https://frutjam.com/components/sidebar.md): CSS-only Tailwind CSS sidebar for side navigation panels. Collapsible, with nav item states and section headings. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Skeleton](https://frutjam.com/components/skeleton.md): CSS-only Tailwind CSS skeleton loader for placeholder UI. Circle, rectangle, and text line shapes with pulse animation. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Stat](https://frutjam.com/components/stat.md): CSS-only Tailwind CSS stat for displaying metrics. Value, label, description, and icon slots. Responsive grid layout. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Status](https://frutjam.com/components/status.md): CSS-only Tailwind CSS status dot indicator with primary, success, warning, and error color variants. Sizes xs–xl. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Steps](https://frutjam.com/components/steps.md): CSS-only Tailwind CSS steps for multi-step wizards and progress indicators. Horizontal and vertical layout, color variants per step. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Surface](https://frutjam.com/components/surface.md): CSS-only Tailwind CSS surface for applying themed background and text colors to a container. All color variants. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Swap](https://frutjam.com/components/swap.md): CSS-only Tailwind CSS swap for toggling between two elements. Flip, rotate, and fade animations, no JavaScript. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Tabs](https://frutjam.com/components/tabs.md): CSS-only Tailwind CSS tabs with border, lifted, boxed, and pill style variants. Active state and sizes, no JavaScript required. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Tag](https://frutjam.com/components/tag.md): CSS-only Tailwind CSS tag (chip) with color variants, soft style, and removable button. Sizes xs–lg. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Textarea](https://frutjam.com/components/textarea.md): CSS-only Tailwind CSS textarea with primary, secondary, accent, and semantic color variants. Sizes xs–xl, ghost style. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Timeline](https://frutjam.com/components/timeline.md): CSS-only Tailwind CSS timeline for chronological event lists. Vertical layout with icon, content, and connector line slots. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Toast](https://frutjam.com/components/toast.md): CSS-only Tailwind CSS toast for notification positioning — top, bottom, start, end, and center placement. No JavaScript for layout. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Toggle](https://frutjam.com/components/toggle.md): CSS-only Tailwind CSS toggle switch with primary, secondary, accent, and semantic color variants. Sizes xs–xl. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Marquee](https://frutjam.com/components/marquee.md): CSS-only Tailwind CSS marquee for horizontally scrolling content and logos. Speed and direction control via CSS, no JavaScript. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.


### Blocks
CSS-only Tailwind CSS UI blocks and sections. No JavaScript, WCAG AA accessible, framework-agnostic. Copy-paste heroes, headers, pricing sections, and feature blocks. Works with Django, HTMX, Laravel, React, and any stack.

- [Header](https://frutjam.com/blocks/header.md): CSS-only Tailwind CSS header blocks with navbar, branding, and mobile drawer. Sticky, transparent, and responsive layout variants. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Pricing](https://frutjam.com/blocks/pricing.md): CSS-only Tailwind CSS pricing blocks built with card and button components. Copy-paste pricing tables with tiers, feature lists, and CTAs. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
- [Hero](https://frutjam.com/blocks/hero.md): CSS-only Tailwind CSS hero blocks — ready-made landing page sections with centered, split, and image layouts. No JavaScript required, WCAG AA accessible. Works with Django, HTMX, Laravel, React, and any stack.


### Plugins
Extend Frutjam with CSS-only Tailwind CSS plugins. Zero JavaScript, WCAG accessible, framework-agnostic. Works with Django, HTMX, Laravel, and any framework.

- [Markdown editor](https://frutjam.com/plugins/markdown-editor.md): 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.