Frutjam 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.
Accordion
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.
Alert
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.
Badge
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.
Breadcrumb
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.
Button
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.
Card
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
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.
Divider
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
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.
Header
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.
Input
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.
Join
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.
Link
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.
Menu
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.
Modal
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.
Navbar
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.
Popover
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.
Radio
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.
Table
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.
Tooltip
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.