# 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: 21 - Compatibility: Universal / Framework Agnostic - Example Integrations: React, Vue, Svelte, Next.js, Laravel, Django, Alpine.js, HTMX - License: MIT - Last Updated: 2026-03-13 > **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): - [Installation](https://frutjam.com/docs/installation.md): Learn how to use the Frutjam component library in a Tailwind CSS project. It works with all web development frameworks using the same setup - just install Frutjam and add `@import "frutjam"`, and you're ready to go - [Configuration](https://frutjam.com/docs/configuration.md): - [Typography](https://frutjam.com/docs/typography.md): Frutjam provides a typographic system with high precision. We offer a standard scale from `xs` to `9xl`, but the library also supports **dynamic sizing**, which lets you use utility classes to define any specific pixel value. ### 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): The Button component allows users to take actions and make choices with a single tap. Frutjam provides extensive customization, including solid, outline, and ghost variants. You can add icons, change shapes to square or circle, and use various sizes. It includes loading and disabled states. - [Modal](https://frutjam.com/components/modal.md): The Modal component is a dialog box that appears on top of the main content. It is used to capture user attention, confirm actions, or display extra information. It can be triggered by a button and includes options for closing, such as a close button or clicking outside the modal container. - [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 labeling element used to display counts, status updates, or highlights. Featuring semantic colors and multiple geometric shapes, it offers versatile sizing for notification indicators and content categorization. - [Card](https://frutjam.com/components/card.md): Cards are flexible content containers used to group related information. The Card component includes sections for images, titles, descriptions, and action buttons. It supports various layouts like side-by-side or stacked. You can customize borders, shadows, and padding to fit your specific design. - [Checkbox](https://frutjam.com/components/checkbox.md): The Checkbox component is used for selecting one or multiple options from a list. It is a standard form element that supports different sizes and brand colors. You can use it with a label for better accessibility. It handles checked, unchecked, and indeterminate states for complex UI needs. - [Breadcrumb](https://frutjam.com/components/breadcrumb.md): A semantic navigation aid that tracks user location within a site hierarchy. Built with Tailwind CSS and full WAI-ARIA support, it features smart default separator logic that automates layout while allowing for text or icon overrides. Improves site crawlability and UX for complex structures. - [Divider](https://frutjam.com/components/divider.md): The Divider component is used to visually separate content into distinct sections. It can be oriented horizontally or vertically. You can also add text or icons within the divider to provide more context. It helps in organizing information and improving the readability of complex page layouts. - [Drawer](https://frutjam.com/components/drawer.md): The Drawer is a navigation component that slides in from the side of the screen. It is commonly used for mobile menus or secondary navigation. It consists of a toggle button and a content area. You can control its behavior, such as whether it stays open or overlays the main page content easily. - [Input](https://frutjam.com/components/input.md): The Input component is a text field that allows users to enter and edit data. It supports various types like text, password, and email. You can add labels, helper text, and icons to enhance the user experience. It includes states for focus, error, and disabled to ensure proper form validation. - [Header](https://frutjam.com/components/header.md): Define the structural identity of your pages with a semantic header component. It houses titles, logos, and introductory content, following accessibility standards to ensure your site's hierarchy is clear to users and search engine bots. - [Link](https://frutjam.com/components/link.md): The Link component is used for navigation between pages or to external sites. It is styled to look like traditional text but with interactive hover states and colors. You can add icons and underline effects. It is an essential building block for menus, footers, and inline body text navigation. - [Navbar](https://frutjam.com/components/navbar.md): The Navbar component is divided into three sections—start, center, and end—that manage both vertical and horizontal alignment. It’s primarily used in headers and navigation drawers to organize navigation links and supports right-to-left (RTL) layouts. - [Table](https://frutjam.com/components/table.md): The Table component organizes data into a grid of rows and columns. It is designed to handle large amounts of information efficiently. Features include hoverable rows, zebra stripes for better readability, and compact modes. It is fully responsive and ensures data remains clear on any device. - [Radio](https://frutjam.com/components/radio.md): Radio buttons allow users to select exactly one option from a set of mutually exclusive choices. This component supports various sizes and colors. It is typically used in forms where only one answer is required. Labels can be added to ensure the component is accessible to all types of users. - [Menu](https://frutjam.com/components/menu.md): Versatile element for lists of links or actions. Supports vertical/horizontal layouts, nested submenus, and icons. Features active/disabled states and specialized versions like file trees or mega menus. Used for sidebars and dropdowns with built-in focus and hover interactions. - [Tooltip](https://frutjam.com/components/tooltip.md): The Tooltip component is a small pop-up that appears when a user hovers over an element. It provides brief, helpful descriptions or context about a specific UI item. You can customize the position (top, bottom, left, right) and the color to match your design system's specific requirements. - [Popover](https://frutjam.com/components/popover.md): Explore a variety of interactive popover examples, from dropdown to mega menus. Fully responsive, highly customizable, and supports both hover and click behavior to display rich content in a floating overlay. - [Join](https://frutjam.com/components/join.md): The Join component is used to group multiple elements together into a single cohesive unit. It is perfect for combining buttons, inputs, and labels without gaps between them. You can create segmented controls or search bars. It handles border radius automatically to maintain a clean appearance. - [Alert](https://frutjam.com/components/alert.md): Build better interfaces with the Frutjam UI Alert component. Fully accessible, responsive, and easy to customize with semantic color variants like Success, Warning, and Error. Perfect for providing clear contextual feedback in your web projects. - [Progress](https://frutjam.com/components/progress.md): ### 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): header - [Pricing](https://frutjam.com/blocks/pricing.md): ### Plugins Plugins - [Markdown editor](https://frutjam.com/plugins/markdown-editor.md): MarkdownEditor transforms a standard HTML `