# Frutjam UI Library Tailwind CSS components and documentation optimized for AI development. ## Component Directory ### 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 - [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): The accordion component offers an easy, responsive, and customizable way to organize content on your website. Whether you're building an FAQ section, expanding content blocks, or creating a navigation menu, this component offers an intuitive, interactive user experience. - [Badge](https://frutjam.com/components/badge.md): The Badge component is a small labeling element used to display counts, status updates, or highlights. It comes in various colors like primary, secondary, and ghost. You can adjust the size from tiny to large. It is perfect for indicating notifications or categorizing items within your UI. - [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): The `Breadcrumb` component helps users understand and navigate their current location in a site hierarchy. It supports semantic HTML, class-based styling, and customizable separators. - [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 a wrapper that consists of three specific sections: navbar-start, navbar-center, and navbar-end. It is used to position elements at the left, center, and right of the navigation bar. You can apply different background colors and border-radius styles to the contain - [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. ### Blocks - [Header](https://frutjam.com/blocks/header.md): header - [Pricing](https://frutjam.com/blocks/pricing.md): ### Plugins - [Markdown editor](https://frutjam.com/plugins/markdown-editor.md): MarkdownEditor transforms a standard HTML `