# LoveUI

> Open-source React components, examples, and patterns for building polished product interfaces with Tailwind CSS.

LoveUI is an open-source React and Tailwind CSS component system. The docs are optimized for developers and AI coding assistants that need exact installation, usage, source, and example context.

## Primary resources

- [Documentation](https://www.loveui.dev/docs)
- [Components](https://www.loveui.dev/components)
- [Full LLM context](https://www.loveui.dev/llms-full.txt)
- [GitHub repository](https://github.com/loveconnor/loveui)

## Component catalog

- [Accordion](https://www.loveui.dev/components/accordion): A set of collapsible panels with headings.
- [Alert](https://www.loveui.dev/components/alert): A callout for information and a blocking dialog for decisions.
- [Autocomplete](https://www.loveui.dev/components/autocomplete): An input that suggests options as you type.
- [Avatar](https://www.loveui.dev/components/avatar): An image element with a fallback for representing the user.
- [Badge](https://www.loveui.dev/components/badge): A badge or a component that looks like a badge.
- [Breadcrumb](https://www.loveui.dev/components/breadcrumb): Displays the path to the current resource using a hierarchy of links.
- [Button](https://www.loveui.dev/components/button): A button or a component that looks like a button.
- [Card](https://www.loveui.dev/components/card): A content container for grouping related information.
- [Checkbox](https://www.loveui.dev/components/checkbox): A control for checked state, with optional grouped selection.
- [Collapsible](https://www.loveui.dev/components/collapsible): A collapsible panel controlled by a button.
- [Combobox](https://www.loveui.dev/components/combobox): An input combined with a list of predefined items to select.
- [Dialog](https://www.loveui.dev/components/dialog): A popup that opens on top of the entire page.
- [Empty](https://www.loveui.dev/components/empty): A container for displaying empty state information.
- [Field](https://www.loveui.dev/components/field): A component that provides labelling and validation for form controls.
- [Fieldset](https://www.loveui.dev/components/fieldset): A native fieldset element with a legend.
- [Form](https://www.loveui.dev/components/form): A form wrapper component that simplifies validation and submission.
- [Frame](https://www.loveui.dev/components/frame): A framed container for grouping related information.
- [Group](https://www.loveui.dev/components/group): A component for visually grouping a series of controls.
- [Input](https://www.loveui.dev/components/input): A native input element.
- [Label](https://www.loveui.dev/components/label): Renders an accessible label associated with controls.
- [Menu](https://www.loveui.dev/components/menu): A list of actions in a dropdown, enhanced with keyboard navigation.
- [Meter](https://www.loveui.dev/components/meter): A graphical display of a numeric value within a range.
- [Number Field](https://www.loveui.dev/components/number-field): A numeric input element with increment and decrement buttons, and a scrub area.
- [Pagination](https://www.loveui.dev/components/pagination): A pagination with page navigation, next and previous links.
- [Popover](https://www.loveui.dev/components/popover): An accessible popup anchored to a button.
- [Preview Card](https://www.loveui.dev/components/preview-card): A popup that appears when a link is hovered, showing a preview for sighted users.
- [Progress](https://www.loveui.dev/components/progress): Displays the status of a task that takes a long time.
- [Radio Group](https://www.loveui.dev/components/radio-group): A set of checkable buttons where no more than one of the buttons can be checked at a time.
- [Scroll Area](https://www.loveui.dev/components/scroll-area): A native scroll container with custom scrollbars.
- [Select](https://www.loveui.dev/components/select): A common form component for choosing a predefined value in a dropdown menu.
- [Separator](https://www.loveui.dev/components/separator): A separator element accessible to screen readers.
- [Sheet](https://www.loveui.dev/components/sheet): A flyout that opens from the side of the screen, based on the dialog component.
- [Skeleton](https://www.loveui.dev/components/skeleton): A loading state skeleton for your components.
- [Slider](https://www.loveui.dev/components/slider): An input where the user selects a value from within a given range.
- [Switch](https://www.loveui.dev/components/switch): A control that indicates whether a setting is on or off.
- [Table](https://www.loveui.dev/components/table): A simple table component for displaying tabular data.
- [Tabs](https://www.loveui.dev/components/tabs): A component for toggling between related panels on the same page.
- [Textarea](https://www.loveui.dev/components/textarea): A native textarea element.
- [Toast](https://www.loveui.dev/components/toast): Generates standard and gooey toast notifications.
- [Toggle](https://www.loveui.dev/components/toggle): A two-state button that can stand alone or work inside a group.
- [Toolbar](https://www.loveui.dev/components/toolbar): A container for grouping a set of buttons and controls.
- [Tooltip](https://www.loveui.dev/components/tooltip): A popup that appears when an element is hovered or focused, showing a hint for sighted users.

## Documentation index

# Overview


- **Overview**
- [Introduction](/docs): A practical introduction to LoveUI and how the docs are organized.
- [Get Started](/docs/get-started): Install LoveUI, add your first component, and understand the setup.
- [Component Guide](/docs/component-guide): How to read component docs and choose the right LoveUI component.
- [Styling](/docs/styling): How LoveUI uses CSS variables, Tailwind CSS, and state colors.
- [Accessibility](/docs/accessibility): How LoveUI components support keyboard, screen-reader, and form accessibility.
- [Contributing Guide](/docs/contributing): How to make focused, useful contributions to LoveUI.

- **Components**
- [Accordion](/docs/components/accordion): A set of collapsible panels with headings.
- [Alert](/docs/components/alert): A callout for information and a blocking dialog for decisions.
- [Autocomplete](/docs/components/autocomplete): An input that suggests options as you type.
- [Avatar](/docs/components/avatar): An image element with a fallback for representing the user.
- [Badge](/docs/components/badge): A badge or a component that looks like a badge.
- [Breadcrumb](/docs/components/breadcrumb): Displays the path to the current resource using a hierarchy of links.
- [Button](/docs/components/button): A button or a component that looks like a button.
- [Card](/docs/components/card): A content container for grouping related information.
- [Checkbox](/docs/components/checkbox): A control for checked state, with optional grouped selection.
- [Collapsible](/docs/components/collapsible): A collapsible panel controlled by a button.
- [Combobox](/docs/components/combobox): An input combined with a list of predefined items to select.
- [Dialog](/docs/components/dialog): A popup that opens on top of the entire page.
- [Empty](/docs/components/empty): A container for displaying empty state information.
- [Field](/docs/components/field): A component that provides labelling and validation for form controls.
- [Fieldset](/docs/components/fieldset): A native fieldset element with a legend.
- [Form](/docs/components/form): A form wrapper component that simplifies validation and submission.
- [Frame](/docs/components/frame): A framed container for grouping related information.
- [Group](/docs/components/group): A component for visually grouping a series of controls.
- [Input](/docs/components/input): A native input element.
- [Label](/docs/components/label): Renders an accessible label associated with controls.
- [Menu](/docs/components/menu): A list of actions in a dropdown, enhanced with keyboard navigation.
- [Meter](/docs/components/meter): A graphical display of a numeric value within a range.
- [Number Field](/docs/components/number-field): A numeric input element with increment and decrement buttons, and a scrub area.
- [Pagination](/docs/components/pagination): A pagination with page navigation, next and previous links.
- [Popover](/docs/components/popover): An accessible popup anchored to a button.
- [Preview Card](/docs/components/preview-card): A popup that appears when a link is hovered, showing a preview for sighted users.
- [Progress](/docs/components/progress): Displays the status of a task that takes a long time.
- [Radio Group](/docs/components/radio-group): A set of checkable buttons where no more than one of the buttons can be checked at a time.
- [Scroll Area](/docs/components/scroll-area): A native scroll container with custom scrollbars.
- [Select](/docs/components/select): A common form component for choosing a predefined value in a dropdown menu.
- [Separator](/docs/components/separator): A separator element accessible to screen readers.
- [Sheet](/docs/components/sheet): A flyout that opens from the side of the screen, based on the dialog component.
- [Skeleton](/docs/components/skeleton): A loading state skeleton for your components.
- [Slider](/docs/components/slider): An input where the user selects a value from within a given range.
- [Switch](/docs/components/switch): A control that indicates whether a setting is on or off.
- [Table](/docs/components/table): A simple table component for displaying tabular data.
- [Tabs](/docs/components/tabs): A component for toggling between related panels on the same page.
- [Textarea](/docs/components/textarea): A native textarea element.
- [Toast](/docs/components/toast): Generates standard and gooey toast notifications.
- [Toggle](/docs/components/toggle): A two-state button that can stand alone or work inside a group.
- [Toolbar](/docs/components/toolbar): A container for grouping a set of buttons and controls.
- [Tooltip](/docs/components/tooltip): A popup that appears when an element is hovered or focused, showing a hint for sighted users.