# fab-ui

> A modern registry of React and Next.js components, built on top of Base UI and beyond.

## Overview

- [Get Started](https://fab-ui.com/docs/get-started.md): Install and configure fab-ui components in your project.
- [Introduction](https://fab-ui.com/docs.md): A modern registry of React and Next.js components, built on top of Base UI and beyond. Open source, accessible, customizable.
- [Styling](https://fab-ui.com/docs/styling.md): Configure colors and theming for fab-ui components.

## Fab Components

- [Liquid Metal Avatar](https://fab-ui.com/docs/fab-components/liquid-metal-avatar.md): An avatar with an animated liquid metal shader effect.
- [Liquid Metal Button](https://fab-ui.com/docs/fab-components/liquid-metal-button.md): A button with an animated liquid metal shader effect.
- [Liquid Metal Card](https://fab-ui.com/docs/fab-components/liquid-metal-card.md): A card with an animated liquid metal shader effect.

## Components

- [Accordion](https://fab-ui.com/docs/components/accordion.md): A set of collapsible panels with headings.
- [Alert Dialog](https://fab-ui.com/docs/components/alert-dialog.md): A dialog that requires a user response to proceed.
- [Autocomplete](https://fab-ui.com/docs/components/autocomplete.md): An input that suggests options as you type.
- [Avatar](https://fab-ui.com/docs/components/avatar.md): An easily stylable avatar component.
- [Badge](https://fab-ui.com/docs/components/badge.md): Displays a badge or a component that looks like a badge.
- [Button](https://fab-ui.com/docs/components/button.md): A button component that can be rendered as another tag or focusable when disabled.
- [Card](https://fab-ui.com/docs/components/card.md): Displays a card with header, content, and footer.
- [Checkbox Group](https://fab-ui.com/docs/components/checkbox-group.md): A group of checkboxes that can be controlled together.
- [Checkbox](https://fab-ui.com/docs/components/checkbox.md): A control that allows the user to toggle between checked and not checked.
- [Collapsible](https://fab-ui.com/docs/components/collapsible.md): An interactive component that expands and collapses content.
- [Combobox](https://fab-ui.com/docs/components/combobox.md): A searchable dropdown that allows users to filter and select from a list of options.
- [Context Menu](https://fab-ui.com/docs/components/context-menu.md): A menu that appears on right-click, providing contextual actions for the target element.
- [Dialog](https://fab-ui.com/docs/components/dialog.md): A modal window that appears on top of the main content, requiring user interaction.
- [Drawer](https://fab-ui.com/docs/components/drawer.md): A panel that slides in from the edge of the screen with swipe-to-dismiss gestures.
- [Dropdown Menu](https://fab-ui.com/docs/components/dropdown-menu.md): A menu that appears when clicking a trigger element, providing a list of actions or options.
- [Field](https://fab-ui.com/docs/components/field.md): A form field wrapper that associates a label, description, and error message with an input.
- [Fieldset](https://fab-ui.com/docs/components/fieldset.md): A container for grouping related form fields with a legend.
- [Form](https://fab-ui.com/docs/components/form.md): A form container that handles validation and submission.
- [Hover Card](https://fab-ui.com/docs/components/hover-card.md): A card that appears on hover to preview content.
- [Input Group](https://fab-ui.com/docs/components/input-group.md): An input with addons like icons, buttons, or text on either side.
- [Input](https://fab-ui.com/docs/components/input.md): A text input field for capturing user data.
- [Label](https://fab-ui.com/docs/components/label.md): A text label for form inputs that provides accessible labeling.
- [Meter](https://fab-ui.com/docs/components/meter.md): A visual indicator that displays a value within a known range.
- [Navigation Menu](https://fab-ui.com/docs/components/navigation-menu.md): A collection of links and menus for website navigation.
- [Number Field](https://fab-ui.com/docs/components/number-field.md): A numeric input with increment and decrement buttons.
- [Popover](https://fab-ui.com/docs/components/popover.md): A floating panel that appears next to a trigger element.
- [Progress](https://fab-ui.com/docs/components/progress.md): A progress bar that shows completion status of a task.
- [Radio Group](https://fab-ui.com/docs/components/radio-group.md): A set of mutually exclusive options where only one can be selected.
- [Scroll Area](https://fab-ui.com/docs/components/scroll-area.md): A scrollable container with custom scrollbars.
- [Select](https://fab-ui.com/docs/components/select.md): A dropdown menu for selecting a value from a list of options.
- [Separator](https://fab-ui.com/docs/components/separator.md): A visual divider between content sections.
- [Slider](https://fab-ui.com/docs/components/slider.md): A control for selecting a value from a range by dragging a thumb.
- [Switch](https://fab-ui.com/docs/components/switch.md): A toggle control for switching between two states.
- [Tabs](https://fab-ui.com/docs/components/tabs.md): A set of layered sections of content displayed one at a time.
- [Textarea](https://fab-ui.com/docs/components/textarea.md): A multi-line text input field.
- [Toggle Group](https://fab-ui.com/docs/components/toggle-group.md): A set of toggle buttons that allows single or multiple selections.
- [Toggle](https://fab-ui.com/docs/components/toggle.md): A two-state button that can be either on or off.
- [Toolbar](https://fab-ui.com/docs/components/toolbar.md): A container for grouping a set of buttons and controls.
- [Tooltip](https://fab-ui.com/docs/components/tooltip.md): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.