# 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 for polished product interfaces, SaaS apps, dashboards, forms, charts, and application screens. 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)
- [Blocks](https://www.loveui.dev/blocks)
- [Charts](https://www.loveui.dev/charts)
- [Icons](https://www.loveui.dev/icons)
- [LoveUI Pro](https://www.loveui.dev/pro)
- [Full LLM context](https://www.loveui.dev/llms-full.txt)
- [GitHub repository](https://github.com/loveconnor/loveui)

## What LoveUI is best for

- React components for product interfaces, dashboards, SaaS apps, admin panels, and design systems.
- Tailwind CSS component examples with accessible states, interaction patterns, and copy-paste source.
- Production-ready blocks for heroes, pricing, auth, sidebars, command palettes, forms, charts, and complete application surfaces.
- AI-assisted UI building with exact registry names, install commands, source context, and docs pages.

## 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.

## Block catalog

- [404 Blocks](https://www.loveui.dev/blocks/404): 404 blocks for missing pages, broken links, empty routes, and recovery actions.
- [Auth Blocks](https://www.loveui.dev/blocks/auth): Authentication blocks for building polished sign-in and account entry screens with LoveUI.
- [Blog Blocks](https://www.loveui.dev/blocks/blog): Blog blocks for editorial sections, article indexes, and content marketing layouts.
- [Command Palette Blocks](https://www.loveui.dev/blocks/command-palette): Command palette blocks for keyboard-first search, quick actions, and application navigation.
- [Contact Blocks](https://www.loveui.dev/blocks/contact): Contact blocks for support pages, sales forms, office details, and community links.
- [CTA Blocks](https://www.loveui.dev/blocks/cta): CTA blocks for product conversion, newsletter capture, and trial signup sections.
- [Download Blocks](https://www.loveui.dev/blocks/download): Download blocks for software installers, product downloads, plugin marketplaces, and release pages.
- [FAQ Blocks](https://www.loveui.dev/blocks/faq): FAQ blocks for help centers, product pages, onboarding flows, and support surfaces.
- [Features Blocks](https://www.loveui.dev/blocks/features): Feature blocks for product benefits, capability grids, and marketing sections.
- [Footer Blocks](https://www.loveui.dev/blocks/footer): Footer blocks for navigation, resource links, social actions, and app store badges.
- [Header Blocks](https://www.loveui.dev/blocks/header): Header blocks for responsive site navigation, product menus, and sticky app bars.
- [Hero Blocks](https://www.loveui.dev/blocks/hero): Hero blocks for landing pages, product launches, dashboard previews, and agency pages.
- [Image Gallery Blocks](https://www.loveui.dev/blocks/image-gallery): Image gallery blocks for building responsive visual grids and editorial media sections.
- [Integrations Blocks](https://www.loveui.dev/blocks/integrations): Integration blocks for tool directories, logo matrices, and connected product sections.
- [Logo Cloud Blocks](https://www.loveui.dev/blocks/logo-cloud): Logo cloud blocks for partner proof, customer lists, and animated brand rows.
- [Pricing Blocks](https://www.loveui.dev/blocks/pricing): Pricing blocks for subscription tiers, plan comparisons, and checkout conversion sections.
- [Sidebar Blocks](https://www.loveui.dev/blocks/sidebar): Sidebar blocks for application navigation, nested menus, workspaces, and multi-panel product layouts.
- [Testimonials Blocks](https://www.loveui.dev/blocks/testimonials): Testimonials blocks for customer proof, founder quotes, social proof grids, and rotating quote sections.

## Chart catalog

- [Area Charts](https://www.loveui.dev/charts/area): Area chart variations for visitor, device, and trend reporting.
- [Bar Charts](https://www.loveui.dev/charts/bar): Bar chart variations for categorical analytics and comparison views.
- [Line Charts](https://www.loveui.dev/charts/line): Line chart variations for trend, lifecycle, and time-series reporting.
- [Scatter Charts](https://www.loveui.dev/charts/scatter): Scatter chart variations for correlation, cohort, and distribution analysis.
- [Funnel Charts](https://www.loveui.dev/charts/funnel): Funnel chart variations for conversion, pipeline, and stage analysis.
- [Treemap Charts](https://www.loveui.dev/charts/treemap): Treemap chart variations for hierarchy, allocation, and category distribution.
- [Pie Charts](https://www.loveui.dev/charts/pie): Pie and donut chart variations for part-to-whole analytics.
- [Radar Charts](https://www.loveui.dev/charts/radar): Radar chart variations for scorecards and multi-axis comparisons.
- [Radial Charts](https://www.loveui.dev/charts/radial): Radial chart variations for progress, totals, and compact KPI panels.

## Icon and asset catalog

- [Icons](https://www.loveui.dev/icons): Interface icons, symbols, and pictograms from LoveUI. Popular categories: Align, Animal, App, Arrows, Badge, Book, Building, Calendar, Chart, Circle, Clipboard, Clock.
- [Logos](https://www.loveui.dev/icons/logos): Brand, product, payment, flag, and platform logos. Popular categories: Adobe, Ai, Browser, Cms, Crypto, Database, Design, Devtool, Framework, Google, Language, Library.
- [Vectors](https://www.loveui.dev/icons/vectors): Abstract marks, characters, shapes, and illustration vectors. Popular categories: Abstract, Ellipse, Flower, Geometric, Misc, Moon, Number, Organic, Polygon, Rectangle, Stars, Triangle.

## 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.
- [LoveUI Skills](/docs/loveui-skills): How to use the LoveUI skill pack with an AI coding agent.
- [LoveUI Pro Roadmap](/docs/pro-roadmap): See what is planned for LoveUI Pro, including Pro blocks for every block category, advanced charts, application systems, and complete templates.
- [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.