# 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: 1.10.1 - Documentation version: 1.4.1 - Stack: Tailwind CSS (Utility-first) - Total Components: 51 - Compatibility: Universal / Framework Agnostic - Example Integrations: React, Vue, Svelte, Next.js, Laravel, Django, Alpine.js, HTMX - License: MIT - Last Updated: 2026-04-22 > **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 Docs - [Overview](https://frutjam.com/docs/overview.md): 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. - [Themes](https://frutjam.com/docs/themes.md): Frutjam's theming system lets you switch between light, dark, and custom themes using CSS variables and a single data attribute. Extend or override any token directly in your stylesheet without JavaScript or a build step, and ship polished on-brand interfaces with ease. - [Colors](https://frutjam.com/docs/colors.md): Frutjam's color system is built on semantic tokens that adapt across light and dark themes. Customize your palette using CSS custom properties and choose from base, primary, and accent scales. Every color is designed to meet WCAG AA contrast ratios out of the box. - [Installation](https://frutjam.com/docs/installation.md): Install Frutjam in minutes by adding the package and registering the plugin in your Tailwind config. Works with any Tailwind CSS project and supports the prefix system so you can integrate it alongside existing styles without conflicts or breaking changes. - [Configuration](https://frutjam.com/docs/configuration.md): Configure Frutjam to match your project's exact needs. The Tailwind plugin exposes options for setting default themes, defining custom color tokens, toggling the prefix system, and controlling which components are included so your output stays lean and intentional. - [Typography](https://frutjam.com/docs/typography.md): Frutjam's typography system provides a consistent scale for headings, body text, and supporting sizes. Built on semantic HTML elements and CSS custom properties, it ensures readable, accessible text across all screen sizes and adapts seamlessly to your chosen theme. ### Components Find a collection of clean, reusable components here to accelerate your web development, ready to use and easy to customize. We are working on adding more components. - [Button](https://frutjam.com/components/button.md): A high-performance, fully accessible button component built with semantic HTML and Tailwind CSS. Available in multiple sizes, colors, and styles including solid, outline, ghost, and soft variants. Supports loading states, icon integration, and link buttons for comprehensive interactive UIs. - [Modal](https://frutjam.com/components/modal.md): A lightweight, accessible modal dialog component built with native HTML dialog elements and Tailwind CSS. Display overlays for confirmations, forms, and detailed content without heavy JavaScript. Supports multiple sizes, custom headers, footers, and focus-trap behavior. - [Accordion](https://frutjam.com/components/accordion.md): A high-performance, accessible accordion component built with native HTML semantics and Tailwind CSS. Featuring collapsible panels for FAQs and menus, it ensures zero-dependency functionality and fast load times. Supports exclusive-mode, flush, and multiple-open variants for a seamless UX. - [Badge](https://frutjam.com/components/badge.md): A compact, accessible badge component built with Tailwind CSS and semantic HTML. Highlight statuses, labels, counts, and categories with multiple color variants, sizes, and styles. Supports soft, outline, and ghost variants for versatile notification indicators and content metadata. - [Card](https://frutjam.com/components/card.md): A versatile, accessible card component built with semantic HTML and Tailwind CSS. Create content containers for articles, products, and profiles with flexible header, body, and footer sections. Supports horizontal layouts, image overlays, and surface variants for rich content presentation. - [Checkbox](https://frutjam.com/components/checkbox.md): A fully accessible checkbox component built with native HTML inputs and Tailwind CSS. Capture binary and multi-select user input with custom styling, color variants, and size options. Supports indeterminate states, disabled modes, and label integration for accessible, theme-aware forms. - [Breadcrumb](https://frutjam.com/components/breadcrumb.md): A semantic, accessible breadcrumb component built with native HTML and Tailwind CSS. Improve site navigation and SEO with structured path trails. Supports custom separators, icon prefixes, and responsive truncation for clear hierarchical navigation across multi-level content structures. - [Divider](https://frutjam.com/components/divider.md): A clean, accessible divider component built with semantic HTML and Tailwind CSS. Separate content sections visually with horizontal and vertical lines. Supports text labels, icons, and color variants for flexible section separators in layouts, forms, and navigation menus. - [Drawer](https://frutjam.com/components/drawer.md): A smooth, accessible drawer component built with CSS and Tailwind CSS. Create sliding off-canvas panels for navigation, filters, and side menus. Supports multiple positions, overlay backdrops, and toggle controls for mobile-friendly, zero-JavaScript sidebar navigation patterns. - [Input](https://frutjam.com/components/input.md): A fully accessible text input component built with native HTML and Tailwind CSS. Capture user data with labels, helper text, error states, and icon support. Available in multiple sizes and color variants with prefix/suffix patterns for modern, theme-aware form designs. - [Header](https://frutjam.com/components/header.md): A semantic, accessible header component built with HTML5 and Tailwind CSS. Structure site headers with branding, navigation, and action elements in flexible layouts. Supports sticky positioning, responsive menus, and theme-aware styling for modern, SEO-friendly page headers. - [Link](https://frutjam.com/components/link.md): A semantic, accessible link component built with native HTML anchor elements and Tailwind CSS. Style hyperlinks with consistent color, hover states, and underline variants. Supports primary and neutral color schemes for navigation links, inline text links, and call-to-action elements. - [Navbar](https://frutjam.com/components/navbar.md): A responsive, accessible navbar component built with semantic HTML and Tailwind CSS. Structure top navigation with branding, links, and action items in flexible layouts. Supports sticky positioning, mobile menus, dropdown integration, and theme-aware styling for modern site headers. - [Table](https://frutjam.com/components/table.md): A semantic, accessible data table component built with native HTML and Tailwind CSS. Display structured data with striped rows, sticky headers, and compact sizing options. Supports horizontal scrolling, hover states, and sorting patterns for professional, responsive data presentation. - [Radio](https://frutjam.com/components/radio.md): A fully accessible radio button component built with native HTML inputs and Tailwind CSS. Enable single-choice selection with custom styling, multiple sizes, and color variants. Supports grouped radio sets, disabled states, and label integration for accessible, theme-aware form controls. - [Menu](https://frutjam.com/components/menu.md): A semantic, accessible menu component built with native HTML and Tailwind CSS. Create navigation lists, sidebar menus, and dropdown options with consistent spacing and hover states. Supports icons, active states, and nested submenus for complete, zero-JavaScript navigation systems. - [Tooltip](https://frutjam.com/components/tooltip.md): A lightweight, accessible tooltip component built with CSS and Tailwind CSS. Display contextual hints and additional information on hover or focus without JavaScript. Supports multiple placement positions and color variants for effective, accessible UI guidance and documentation hints. - [Popover](https://frutjam.com/components/popover.md): A lightweight, accessible popover component built with Tailwind CSS for contextual information and interactive overlays. Display tooltips, dropdown menus, and additional content on hover or click. Supports multiple positions and rich content layouts for intuitive contextual UI patterns. - [Join](https://frutjam.com/components/join.md): A layout utility component built with Tailwind CSS for grouping adjacent elements into cohesive controls. Merge borders and remove spacing between buttons, inputs, and selects to create button groups, segmented controls, and combined form fields. Supports horizontal and vertical layouts. - [Alert](https://frutjam.com/components/alert.md): A flexible, zero-JavaScript alert component built with semantic HTML and Tailwind CSS. Communicate success, error, warning, and informational messages with optional icons and soft variants. Supports dismissible patterns and full theme-aware styling for modern, accessible user notifications. - [Progress](https://frutjam.com/components/progress.md): An accessible progress bar component built with native HTML progress elements and Tailwind CSS. Visualize task completion, loading states, and step progression with animated fills. Supports multiple sizes and color variants for clear, accessible progress feedback in any UI. - [Avatar](https://frutjam.com/components/avatar.md): A lightweight, accessible avatar component built with semantic HTML and Tailwind CSS. Display user profile images, initials, and placeholder icons in multiple sizes and shapes. Supports stacked groups, online status indicators, and ring variants for rich user interface representations. - [Carousel](https://frutjam.com/components/carousel.md): A smooth, accessible carousel component built with CSS scroll-snap and Tailwind CSS. Display image galleries, product showcases, and content sliders with touch support and navigation controls. Supports indicators and multiple slide layouts for engaging, zero-JavaScript presentations. - [Chat](https://frutjam.com/components/chat.md): A semantic, accessible chat bubble component built with Tailwind CSS. Display conversation threads and messaging UIs with start and end alignment. Supports avatars, timestamps, message status indicators, and color variants for realistic, accessible chat interfaces and messaging features. - [Collapsible](https://frutjam.com/components/collapsible.md): A lightweight, accessible collapsible component built with native HTML details and summary elements. Expand and collapse content sections for FAQs and progressive disclosure patterns. Zero JavaScript needed—fully keyboard-accessible with smooth transitions and Tailwind CSS styling. - [Combobox](https://frutjam.com/components/combobox.md): A powerful, accessible combobox component combining text input with a dropdown list built with Tailwind CSS. Enables searchable selection and autocomplete patterns. Supports filtering, command palette patterns, and keyboard navigation for intuitive, accessible advanced form controls. - [Countdown](https://frutjam.com/components/countdown.md): A flexible countdown timer component built with Tailwind CSS for displaying time-sensitive data. Perfect for product launches, event countdowns, and limited-time offers. Supports days, hours, minutes, and seconds in multiple layout styles for engaging, urgency-driven time displays. - [Diff](https://frutjam.com/components/diff.md): A visual diff component built with semantic HTML and Tailwind CSS for comparing two content versions side by side. Perfect for code reviews, document revisions, and before/after comparisons. Supports horizontal, vertical, and resizable layouts with color-coded change tracking. - [Footer](https://frutjam.com/components/footer.md): A semantic, accessible footer component built with HTML5 and Tailwind CSS. Structure site footers with navigation links, brand logos, social icons, and legal text. Supports multi-column layouts, responsive stacking, and theme-aware styling for professional, SEO-friendly page footers. - [Hero](https://frutjam.com/components/hero.md): A visually impactful hero section component built with semantic HTML and Tailwind CSS. Create compelling above-the-fold sections with headlines, subtext, CTA buttons, and media. Supports centered, split, and overlay layouts for high-converting landing page hero sections. - [Indicator](https://frutjam.com/components/indicator.md): A flexible indicator component built with Tailwind CSS for overlaying badges, status dots, and notification counts on other elements. Supports all nine placement positions and multiple sizes. Perfect for notification badges on avatars, buttons, and cards in modern UIs. - [KBD](https://frutjam.com/components/kbd.md): A semantic keyboard shortcut component built with native HTML kbd elements and Tailwind CSS. Display keyboard keys, shortcuts, and hotkeys with accurate typographic styling. Supports single keys, combinations, and multiple sizes for developer docs, shortcut guides, and UI hints. - [Loading](https://frutjam.com/components/loading.md): A lightweight loading indicator component built with pure CSS and Tailwind CSS. Display processing states and async feedback with animated spinners, dots, bars, and ring variants. Supports multiple sizes and color variants for accessible, zero-JavaScript loading feedback. - [Mask](https://frutjam.com/components/mask.md): A creative CSS mask component built with Tailwind CSS for applying geometric shapes to images and elements. Clip content into circles, hexagons, squircles, and custom shapes without JavaScript. Perfect for avatar frames, image galleries, decorative layouts, and artistic UI presentations. - [Radial Progress](https://frutjam.com/components/radial-progress.md): A visually engaging radial progress component built with CSS and Tailwind CSS. Display circular progress indicators for skill levels, performance metrics, and completion percentages. Supports custom sizes, stroke widths, and color variants for rich data visualization and dashboard UIs. - [Range](https://frutjam.com/components/range.md): A smooth, accessible range slider component built with native HTML input elements and Tailwind CSS. Capture numerical input with draggable handles, step increments, and custom styling. Supports multiple sizes and color variants for settings panels, filters, and interactive data controls. - [Rating](https://frutjam.com/components/rating.md): An interactive, accessible star rating component built with native HTML inputs and Tailwind CSS. Capture user feedback and display review scores with customizable star counts, sizes, and colors. Supports half-star, read-only, and masked variants for review systems and feedback forms. - [Select](https://frutjam.com/components/select.md): A fully accessible select dropdown component built with native HTML elements and Tailwind CSS. Enable option selection with custom styling, size variants, and error states. Supports grouped options and disabled states for accessible, theme-aware dropdown form controls. - [Sidebar](https://frutjam.com/components/sidebar.md): A responsive, accessible sidebar navigation component built with Tailwind CSS. Create collapsible side panels for dashboards, admin layouts, and multi-section applications. Supports icons, nested menus, collapse toggles, and responsive behavior for professional navigation structures. - [Skeleton](https://frutjam.com/components/skeleton.md): A CSS-only skeleton loading component built with Tailwind CSS for smooth content placeholder animations. Improve perceived performance with animated placeholders matching your layout. Supports text, avatar, card, and image skeleton shapes for seamless loading state experiences. - [Stat](https://frutjam.com/components/stat.md): A semantic statistics display component built with Tailwind CSS for showcasing key metrics and KPIs. Present business data, analytics, and performance figures with titles, values, and descriptions. Supports icons, trend indicators, and multi-stat layouts for professional dashboard UIs. - [Status](https://frutjam.com/components/status.md): A compact status indicator component built with Tailwind CSS for communicating user presence, system health, and workflow states. Display online, offline, busy, and away states with color-coded dots. Supports multiple sizes and label pairings for real-time status communication. - [Steps](https://frutjam.com/components/steps.md): A visual step indicator component built with Tailwind CSS for guiding users through multi-stage processes. Display progress through wizards, onboarding flows, and checkout funnels with numbered or icon steps. Supports horizontal, vertical, completed, and active step states. - [Surface](https://frutjam.com/components/surface.md): A versatile surface component built with Tailwind CSS for creating layered visual hierarchies and content containers. Structure content with multiple depth layers from base to elevated surfaces. Supports rounded shapes for flexible card alternatives and nested layout primitives. - [Swap](https://frutjam.com/components/swap.md): A smooth, zero-JavaScript swap component built with native HTML inputs and Tailwind CSS. Toggle between two content states with fade, rotate, and flip animations. Perfect for theme toggles, mode switches, loading states, and icon transitions for interactive, accessible UI elements. - [Tabs](https://frutjam.com/components/tabs.md): An accessible tab navigation component built with semantic HTML and Tailwind CSS. Organize content sections with horizontal tab bars and smooth panel switching. Supports boxed, bordered, lifted, and underline variants with active states for clean, zero-JavaScript tabbed interfaces. - [Tag](https://frutjam.com/components/tag.md): A lightweight tag component built with Tailwind CSS for labeling, categorizing, and filtering content. Display skill sets, article categories, product attributes, and content metadata with multiple sizes, colors, and shape variants. Supports removable and clickable tag patterns. - [Textarea](https://frutjam.com/components/textarea.md): A fully accessible textarea component built with native HTML elements and Tailwind CSS. Capture multi-line text input for forms, comments, and content creation with custom sizing, error states, and character count support. Theme-aware styling with label integration for accessible forms. - [Timeline](https://frutjam.com/components/timeline.md): A visual timeline component built with semantic HTML and Tailwind CSS for presenting chronological events and process steps. Display history, milestones, and ordered content with vertical and horizontal layouts. Supports icons, dates, and connecting lines for engaging storytelling UIs. - [Toast](https://frutjam.com/components/toast.md): A lightweight toast notification component built with Tailwind CSS for non-intrusive user feedback. Display temporary success, error, warning, and info messages with configurable positions. Supports stacking, icons, and action buttons for clear, accessible notification patterns. - [Toggle](https://frutjam.com/components/toggle.md): A fully accessible toggle switch component built with native HTML inputs and Tailwind CSS. Enable binary on/off settings with smooth animations and custom colors. Supports multiple sizes, disabled states, and label integration for settings panels, feature flags, and preference forms. ### Blocks Browse a collection of expertly crafted, responsive UI blocks. Copy and paste functional sections like Heroes, Features, and Pricing to build your landing pages faster - [Header](https://frutjam.com/blocks/header.md): A semantic, accessible header component built with HTML5 and Tailwind CSS. Structure site headers with branding, navigation, and action elements in flexible layouts. Supports sticky positioning, responsive menus, and theme-aware styling for modern, SEO-friendly page headers. - [Pricing](https://frutjam.com/blocks/pricing.md): ### Plugins Plugins - [Markdown editor](https://frutjam.com/plugins/markdown-editor.md): MarkdownEditor transforms a standard HTML `