# LoveUI full LLM context

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

Use this file when answering implementation questions about LoveUI. Prefer exact component pages, registry example names, and source snippets from the linked documentation over generic UI advice.

Primary URLs:

- Documentation: https://www.loveui.dev/docs
- Components: https://www.loveui.dev/components
- GitHub: https://github.com/loveconnor/loveui

# Component catalog

## Accordion (https://www.loveui.dev/components/accordion)

A set of collapsible panels with headings.

- Example count: 5
- Example registry names: accordion-demo, accordion-controlled, accordion-multiple, accordion-product-faq, accordion-single

## Alert (https://www.loveui.dev/components/alert)

A callout for information and a blocking dialog for decisions.

- Example count: 10
- Example registry names: alert-demo, alert-billing-notice, alert-dialog-demo, alert-error, alert-info, alert-success, alert-warning, alert-with-icon, alert-with-icon-action, dialog-close-confirmation

## Autocomplete (https://www.loveui.dev/components/autocomplete)

An input that suggests options as you type.

- Example count: 14
- Example registry names: autocomplete-demo, autocomplete-async, autocomplete-autohighlight, autocomplete-disabled, autocomplete-form, autocomplete-grouped, autocomplete-inline, autocomplete-lg, autocomplete-limit, autocomplete-members, autocomplete-sm, autocomplete-with-clear, autocomplete-with-label, autocomplete-with-trigger-clear

## Avatar (https://www.loveui.dev/components/avatar)

An image element with a fallback for representing the user.

- Example count: 6
- Example registry names: avatar-demo, avatar-fallback, avatar-group, avatar-radius, avatar-size, avatar-team-stack

## Badge (https://www.loveui.dev/components/badge)

A badge or a component that looks like a badge.

- Example count: 13
- Example registry names: badge-demo, badge-destructive, badge-error, badge-info, badge-lg, badge-outline, badge-release-status, badge-secondary, badge-sm, badge-success, badge-warning, badge-with-icon, badge-with-link

## Breadcrumb (https://www.loveui.dev/components/breadcrumb)

Displays the path to the current resource using a hierarchy of links.

- Example count: 5
- Example registry names: breadcrumb-demo, breadcrumb-compact-path, breadcrumb-custom-separator, breadcrumb-with-ellipsis, breadcrumb-workspace-path

## Button (https://www.loveui.dev/components/button)

A button or a component that looks like a button.

- Example count: 19
- Example registry names: button-demo, button-command-bar, button-destructive, button-destructive-outline, button-disabled, button-ghost, button-icon, button-icon-lg, button-icon-sm, button-lg, button-link, button-loading, button-outline, button-secondary, button-sm, button-with-icon, button-with-link, button-xl, button-xs

## Card (https://www.loveui.dev/components/card)

A content container for grouping related information.

- Example count: 4
- Example registry names: card-demo, card-billing-plan, card-metric-summary, card-team-member

## Checkbox (https://www.loveui.dev/components/checkbox)

A control for checked state, with optional grouped selection.

- Example count: 11
- Example registry names: checkbox-demo, checkbox-card, checkbox-disabled, checkbox-form, checkbox-group-demo, checkbox-group-disabled, checkbox-group-form, checkbox-group-nested-parent, checkbox-group-parent, checkbox-notification-row, checkbox-with-description

## Collapsible (https://www.loveui.dev/components/collapsible)

A collapsible panel controlled by a button.

- Example count: 4
- Example registry names: collapsible-demo, collapsible-checklist, collapsible-command-help, collapsible-release-notes

## Combobox (https://www.loveui.dev/components/combobox)

An input combined with a list of predefined items to select.

- Example count: 13
- Example registry names: combobox-demo, combobox-assignee, combobox-autohighlight, combobox-disabled, combobox-form, combobox-grouped, combobox-lg, combobox-multiple, combobox-multiple-form, combobox-sm, combobox-with-clear, combobox-with-inner-input, combobox-with-label

## Dialog (https://www.loveui.dev/components/dialog)

A popup that opens on top of the entire page.

- Example count: 5
- Example registry names: dialog-demo, dialog-close-confirmation, dialog-from-menu, dialog-invite-member, dialog-nested

## Empty (https://www.loveui.dev/components/empty)

A container for displaying empty state information.

- Example count: 4
- Example registry names: empty-demo, empty-filtered-results, empty-inbox-zero, empty-upload-queue

## Field (https://www.loveui.dev/components/field)

A component that provides labelling and validation for form controls.

- Example count: 18
- Example registry names: field-demo, field-autocomplete, field-checkbox, field-checkbox-group, field-combobox, field-combobox-multiple, field-complete-form, field-disabled, field-error, field-number-field, field-password, field-radio, field-required, field-select, field-slider, field-switch, field-textarea, field-validity

## Fieldset (https://www.loveui.dev/components/fieldset)

A native fieldset element with a legend.

- Example count: 4
- Example registry names: fieldset-demo, fieldset-billing-address, fieldset-danger-zone, fieldset-notification-settings

## Form (https://www.loveui.dev/components/form)

A form wrapper component that simplifies validation and submission.

- Example count: 4
- Example registry names: form-demo, form-newsletter, form-profile-card, form-zod

## Frame (https://www.loveui.dev/components/frame)

A framed container for grouping related information.

- Example count: 4
- Example registry names: frame-demo, frame-analytics-panel, frame-code-output, frame-device-preview

## Group (https://www.loveui.dev/components/group)

A component for visually grouping a series of controls.

- Example count: 5
- Example registry names: group-demo, group-filter-actions, group-segmented-filters, group-toolbar-actions, group-with-input

## Input (https://www.loveui.dev/components/input)

A native input element.

- Example count: 8
- Example registry names: input-demo, input-disabled, input-file, input-lg, input-search-inline, input-sm, input-with-button, input-with-label

## Label (https://www.loveui.dev/components/label)

Renders an accessible label associated with controls.

- Example count: 6
- Example registry names: autocomplete-with-label, checkbox-demo, combobox-with-label, input-with-label, number-field-with-label, textarea-with-label

## Menu (https://www.loveui.dev/components/menu)

A list of actions in a dropdown, enhanced with keyboard navigation.

- Example count: 9
- Example registry names: menu-demo, menu-checkbox, menu-close-on-click, menu-group-labels, menu-hover, menu-link, menu-nested, menu-project-actions, menu-radio-group

## Meter (https://www.loveui.dev/components/meter)

A graphical display of a numeric value within a range.

- Example count: 5
- Example registry names: meter-demo, meter-simple, meter-storage-quota, meter-with-formatted-value, meter-with-range

## Number Field (https://www.loveui.dev/components/number-field)

A numeric input element with increment and decrement buttons, and a scrub area.

- Example count: 11
- Example registry names: number-field-demo, number-field-disabled, number-field-form, number-field-lg, number-field-sm, number-field-ticket-count, number-field-with-formatted-value, number-field-with-label, number-field-with-range, number-field-with-scrub, number-field-with-step

## Pagination (https://www.loveui.dev/components/pagination)

A pagination with page navigation, next and previous links.

- Example count: 4
- Example registry names: pagination-demo, pagination-compact, pagination-mini, pagination-results

## Popover (https://www.loveui.dev/components/popover)

An accessible popup anchored to a button.

- Example count: 4
- Example registry names: popover-demo, popover-account-summary, popover-color-swatch, popover-with-close

## Preview Card (https://www.loveui.dev/components/preview-card)

A popup that appears when a link is hovered, showing a preview for sighted users.

- Example count: 4
- Example registry names: preview-card-demo, preview-card-product, preview-card-profile, preview-card-repository

## Progress (https://www.loveui.dev/components/progress)

Displays the status of a task that takes a long time.

- Example count: 4
- Example registry names: progress-demo, progress-onboarding, progress-with-formatted-value, progress-with-label-value

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

- Example count: 6
- Example registry names: radio-group-demo, radio-group-card, radio-group-delivery, radio-group-disabled, radio-group-form, radio-group-with-description

## Scroll Area (https://www.loveui.dev/components/scroll-area)

A native scroll container with custom scrollbars.

- Example count: 4
- Example registry names: scroll-area-demo, scroll-area-activity, scroll-area-both, scroll-area-horizontal

## Select (https://www.loveui.dev/components/select)

A common form component for choosing a predefined value in a dropdown menu.

- Example count: 9
- Example registry names: select-demo, select-disabled, select-form, select-lg, select-multiple, select-sm, select-timezone, select-with-groups, select-without-alignment

## Separator (https://www.loveui.dev/components/separator)

A separator element accessible to screen readers.

- Example count: 4
- Example registry names: separator-demo, separator-section-label, separator-timeline, separator-vertical-stack

## Sheet (https://www.loveui.dev/components/sheet)

A flyout that opens from the side of the screen, based on the dialog component.

- Example count: 4
- Example registry names: sheet-demo, sheet-checkout-summary, sheet-position, sheet-profile-editor

## Skeleton (https://www.loveui.dev/components/skeleton)

A loading state skeleton for your components.

- Example count: 4
- Example registry names: skeleton-demo, skeleton-chat-list, skeleton-dashboard-card, skeleton-only

## Slider (https://www.loveui.dev/components/slider)

An input where the user selects a value from within a given range.

- Example count: 6
- Example registry names: slider-demo, slider-form, slider-opacity, slider-range, slider-vertical, slider-with-label-value

## Switch (https://www.loveui.dev/components/switch)

A control that indicates whether a setting is on or off.

- Example count: 6
- Example registry names: switch-demo, switch-card, switch-disabled, switch-form, switch-privacy-mode, switch-with-description

## Table (https://www.loveui.dev/components/table)

A simple table component for displaying tabular data.

- Example count: 4
- Example registry names: table-demo, table-framed, table-invoice-list, table-user-roles

## Tabs (https://www.loveui.dev/components/tabs)

A component for toggling between related panels on the same page.

- Example count: 5
- Example registry names: tabs-demo, tabs-settings, tabs-underline, tabs-underline-vertical, tabs-vertical

## Textarea (https://www.loveui.dev/components/textarea)

A native textarea element.

- Example count: 7
- Example registry names: textarea-demo, textarea-disabled, textarea-feedback, textarea-form, textarea-lg, textarea-sm, textarea-with-label

## Toast (https://www.loveui.dev/components/toast)

Generates standard and gooey toast notifications.

- Example count: 12
- Example registry names: toast-demo, gooey-toast-demo, gooey-toast-position, gooey-toast-promise, gooey-toast-states, gooey-toast-with-button, toast-heights, toast-loading, toast-promise, toast-sync-complete, toast-with-action, toast-with-status

## Toggle (https://www.loveui.dev/components/toggle)

A two-state button that can stand alone or work inside a group.

- Example count: 17
- Example registry names: toggle-demo, toggle-disabled, toggle-group-demo, toggle-group-disabled, toggle-group-lg, toggle-group-multiple, toggle-group-outline, toggle-group-outline-with-separator, toggle-group-sm, toggle-group-with-disabled-item, toggle-icon-group, toggle-lg, toggle-outline, toggle-sm, toggle-view-mode, toggle-with-icon, tooltip-grouped

## Toolbar (https://www.loveui.dev/components/toolbar)

A container for grouping a set of buttons and controls.

- Example count: 4
- Example registry names: toolbar-demo, toolbar-canvas-controls, toolbar-density-controls, toolbar-media-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.

- Example count: 4
- Example registry names: tooltip-demo, tooltip-grouped, tooltip-icon-row, tooltip-keyboard-hints

# Documentation content


# Accessibility (/docs/accessibility)



Accessibility is part of the component structure, not a final polish step.

LoveUI uses native HTML whenever possible. For complex interactions such as dialogs, menus, popovers, comboboxes, and tabs, LoveUI uses accessible primitives so keyboard navigation, focus handling, and ARIA state can be handled consistently.

## What LoveUI provides [#what-loveui-provides]

LoveUI components are designed to support:

* Keyboard navigation.
* Visible focus states.
* Labels and descriptions for form controls.
* Screen-reader-friendly structure.
* Disabled and invalid states.
* Dialog and popup focus management.
* Semantic HTML for common content.

Some components still require correct app-level usage. For example, an input needs a useful label, a destructive button needs clear copy, and a toast should not contain critical information that disappears before the user can act.

## Labels and descriptions [#labels-and-descriptions]

Every form control should have a label.

Use [Field](/docs/components/field) when you need a label, description, validation message, and consistent spacing around a control.

Good labels are short and specific:

* Use `Email address` instead of `Email`.
* Use `Project visibility` instead of `Visibility`.
* Use `Receive product updates` instead of `Updates`.

Descriptions should explain constraints, not repeat the label.

## Keyboard behavior [#keyboard-behavior]

Interactive components should be usable without a mouse.

Check these basics when you customize a component:

* `Tab` reaches the control in a logical order.
* `Enter` and `Space` activate buttons, checkboxes, switches, and toggles.
* Arrow keys move through menus, radio groups, tabs, sliders, and list-based controls when expected.
* `Escape` closes dialogs, menus, popovers, and sheets when the primitive supports it.
* Focus returns to the trigger after a popup closes.

## Focus styles [#focus-styles]

Do not remove focus styles.

If you change the visual design, keep a clear focus ring or focus outline with enough contrast. Focus should be visible on buttons, links, inputs, menu items, tab triggers, and any custom interactive element.

## Disabled and loading states [#disabled-and-loading-states]

Use disabled states only when the user cannot interact with the control.

If the action is temporarily unavailable, explain why nearby. If the action is waiting for a request to finish, prefer a loading state that keeps the layout stable.

## Validation [#validation]

Validation messages should be plain and specific.

Use [Field](/docs/components/field) and [Form](/docs/components/form) to keep labels, descriptions, errors, and submission behavior connected.

Write errors like:

* `Enter a valid email address.`
* `Choose at least one role.`
* `Password must be at least 12 characters.`

Avoid vague errors like `Invalid`, `Required`, or `Something went wrong` when the fix is known.


# Component Guide (/docs/component-guide)



LoveUI component pages follow the same structure so you can move quickly.

Each page explains what the component is for, how to install it, how to import it, and which examples show the important states.

## Page structure [#page-structure]

Most component pages include:

* **Preview:** a live example of the default component.
* **Installation:** CLI and manual setup.
* **Usage:** the smallest useful code example.
* **Anatomy:** the component parts and how they work together.
* **Examples:** variants, sizes, states, form usage, and composition patterns.
* **Accessibility notes:** keyboard, labels, focus, and screen-reader expectations.

If a component is built on Base UI, the page may link to the Base UI API reference for lower-level behavior and props.

## Choosing a component [#choosing-a-component]

Use the component that matches the user's task:

* Use **Button** for actions.
* Use **Link-style Button** only when the action is navigation.
* Use **Checkbox** for independent yes/no choices.
* Use **Radio Group** when only one option can be selected.
* Use **Select** when the user chooses from a known list.
* Use **Combobox** or **Autocomplete** when search helps the user find an option.
* Use **Dialog** for focused work that interrupts the page.
* Use **Sheet** for side panels, details, and secondary workflows.
* Use **Toast** for short feedback that does not need a response.
* Use **Alert Dialog** when the user must make a decision before continuing.

## Copying examples [#copying-examples]

Examples are not only visual demos. They show recommended structure.

When you copy an example:

1. Keep the accessibility parts, such as labels, descriptions, and triggers.
2. Replace placeholder text with real product copy.
3. Keep disabled, loading, and error states if the workflow can reach those states.
4. Update imports to match your project.
5. Test with keyboard navigation.

## Building larger screens [#building-larger-screens]

Combine components by responsibility:

* Use **Field** around form controls so labels and errors stay consistent.
* Use **Card** or **Frame** to group related content.
* Use **Tabs** when related views share the same page context.
* Use **Menu** for compact command lists.
* Use **Toolbar** when controls act on the same surface.
* Use **Empty** when a section has no data yet.

Start with the smallest component that solves the interaction. Add more structure only when the user needs it.

## Customizing components [#customizing-components]

LoveUI components are meant to be edited.

Common customizations include:

* Changing class names.
* Adjusting color variables.
* Adding variants.
* Replacing icons.
* Renaming files or import paths.
* Wrapping a component in your app-specific API.

Keep behavior and accessibility intact when customizing. Style changes are usually safe. Changes to focus management, keyboard navigation, roles, labels, and portals need more care.


# Contributing Guide (/docs/contributing)



Thank you for helping improve LoveUI.

The best contributions are focused, easy to review, and clear about the user problem they solve.

## What you can contribute [#what-you-can-contribute]

You can help by:

* Fixing bugs.
* Improving docs.
* Adding new UI components.
* Adding examples.
* Improving accessibility.

## Before you start [#before-you-start]

Open an issue or discussion for large changes. Small fixes, docs edits, and example improvements can usually go straight to a pull request.

Good first changes include:

* Fixing unclear docs.
* Adding a missing example state.
* Improving labels or keyboard behavior.
* Cleaning up a component prop or class name.
* Fixing a bug with a small reproduction.

## Quick steps [#quick-steps]

1. Fork the repo and clone it.
2. Create a new branch.
3. Make a small, focused change.
4. Run formatting and build checks.
5. Open a pull request with a clear description.

## Commands to run before you open a PR [#commands-to-run-before-you-open-a-pr]

```bash
bun run format:write
bun run registry:build
```

If you changed core UI components, also run:

```bash
bun run ui:propagate
```

If you changed docs, check that the docs site still builds and the changed pages render correctly.

## Write clear pull requests [#write-clear-pull-requests]

Please include:

* What changed.
* Why you changed it.
* Screenshots if UI changed.
* Any breaking changes.
* The checks you ran.

Small pull requests are easier to review and merge quickly.

## Component contribution checklist [#component-contribution-checklist]

When adding or changing a component, check:

* The default example is useful.
* Important states are documented.
* The component works with keyboard navigation.
* Labels, descriptions, and errors are connected where needed.
* The manual installation block lists required dependencies and CSS variables.
* The component source and examples use the same import style as the rest of the registry.

## Docs contribution checklist [#docs-contribution-checklist]

When changing docs, use simple language.

Prefer short paragraphs and specific examples. Explain when to use a component, when not to use it, and what each example demonstrates.

## Need more details? [#need-more-details]

For the full technical process, file conventions, and registry details, see:

[Full CONTRIBUTING.md](/api/raw/CONTRIBUTING.md)


# Get Started (/docs/get-started)



This guide shows the fastest path to using LoveUI in a React project.

LoveUI components are meant to live in your app. The CLI copies component code, installs required dependencies, and leaves you with files you can edit.

## Project checklist [#project-checklist]

Before adding components, make sure your project has:

* React.
* Tailwind CSS v4.
* A global stylesheet, such as `app/globals.css`.
* A component import alias, such as `@/components/ui`.

If your app does not use the same import alias, you can still use LoveUI. Update the import paths after copying a component.

## Install the base setup [#install-the-base-setup]

Run the CLI from your project root:

```bash
npx love-ui@latest add loveui
```

This installs the shared setup that most components expect. It may add CSS variables, utility helpers, and dependencies used by LoveUI components.

After installation, check the changed files before committing. The generated files are normal project files, so you can edit them.

## Add a component [#add-a-component]

Add components one at a time:

```bash
npx love-ui@latest add button
```

Replace `button` with the component name from the docs. For example, use `dialog`, `select`, `tabs`, or `toast`.

Each component page also includes a CLI command with the exact name to install.

## Install manually [#install-manually]

Manual setup is useful when you want to review every line before it enters your project.

1. Open a component page in the docs.
2. Copy the code from the **Code** tab.
3. Paste it into your project.
4. Install any listed dependencies.
5. Copy any required CSS variables.
6. Update import paths to match your app.

Use [Styling](/docs/styling) when a component relies on shared colors or state tokens.

## Choose your first components [#choose-your-first-components]

For a basic product screen, start with:

* [Button](/docs/components/button) for actions.
* [Input](/docs/components/input) and [Field](/docs/components/field) for forms.
* [Dialog](/docs/components/dialog) for focused tasks.
* [Table](/docs/components/table) for structured data.
* [Toast](/docs/components/toast) for short feedback.

For a complete form, combine [Form](/docs/components/form), [Field](/docs/components/field), and the specific controls you need.

## After setup [#after-setup]

Read [Component Guide](/docs/component-guide) to understand how the component docs are organized.

Read [Accessibility](/docs/accessibility) before changing keyboard behavior, focus styles, labels, or validation messages.

If you want to contribute back to LoveUI, read the [Contributing Guide](/docs/contributing).


# Introduction (/docs)



## What is LoveUI? [#what-is-loveui]

**LoveUI** is an open-source set of React components, examples, and patterns.

The components are built for product interfaces. They cover common controls like buttons, forms, dialogs, menus, tabs, tables, and feedback messages. Each component is designed to be copied into your app, adjusted, and owned by your codebase.

LoveUI is not a black-box component package. You can inspect the source, change the styles, and keep only the pieces you need.

## What you get [#what-you-get]

LoveUI includes:

* **Components** for common interface needs.
* **Examples** that show realistic states, sizes, variants, and form usage.
* **Styling tokens** based on CSS variables and Tailwind CSS.
* **Accessibility structure** from native HTML and Base UI where interaction behavior is needed.
* **Installation paths** for both the CLI and manual copy-paste setup.

## Why LoveUI? [#why-loveui]

Many UI kits only give you a visual shell. LoveUI gives you the structure, behavior, and examples needed to build real screens faster.

The goal is simple: start with good defaults, then customize without fighting the library.

LoveUI works well when you want:

* Components that are easy to read.
* Styling that lives in your app.
* Examples that show the edge cases, not just the happy path.
* A design system you can grow over time.

## How to use these docs [#how-to-use-these-docs]

Start with [Get Started](/docs/get-started) to install the base setup. Then read [Component Guide](/docs/component-guide) to understand how component pages are structured.

Each component page includes:

* A live preview.
* Installation steps.
* Basic usage.
* Notes about structure and behavior.
* Examples for sizes, states, variants, and form integration.

When you copy a component, also check its examples. They often show the small decisions that matter in production, such as disabled states, validation messages, grouped options, or keyboard-friendly composition.

## Design principles [#design-principles]

LoveUI follows a few steady rules:

* **Use clear HTML first.** Native elements are preferred when they solve the job.
* **Compose small parts.** Components expose pieces like header, title, content, trigger, and footer when that makes the UI easier to control.
* **Keep styles close.** Components use class names and CSS variables so you can tune them in your app.
* **Respect accessibility.** Interactive components include keyboard and focus behavior where the underlying primitive supports it.
* **Show real states.** Docs include loading, disabled, destructive, success, error, and empty states where they apply.

## Who should use it? [#who-should-use-it]

LoveUI is useful for:

* Product teams building dashboards, SaaS apps, admin tools, and internal tools.
* Developers who want components they can copy and understand.
* Teams building a shared design system on top of React and Tailwind CSS.
* Projects that need accessible interaction patterns without a heavy abstraction layer.

## Open Source and Community [#open-source-and-community]

LoveUI is open source under the **MIT license**.

You can read the code, use it in your projects, and contribute improvements.

Read the [Contributing Guide](/docs/contributing) to learn how to file issues, improve docs, or open a pull request.

We welcome focused bug fixes, clearer examples, accessibility improvements, and new components that fit the system.


# Styling (/docs/styling)



## Overview [#overview]

LoveUI uses CSS variables for colors and Tailwind CSS for component classes.

CSS variables make the components easier to theme because the same token can be reused across buttons, alerts, badges, forms, popovers, and dark mode.

You can use the default palette, replace values with your own brand colors, or add more tokens for your app.

## How styling works [#how-styling-works]

The default components use semantic variables instead of hard-coded colors.

For example:

* `--background` controls the app background.
* `--foreground` controls default text.
* `--card` and `--card-foreground` control card surfaces.
* `--border` controls borders.
* `--ring` controls focus rings.
* `--success`, `--warning`, `--info`, and `--destructive` control state UI.

This keeps the component code readable. A button can use `bg-primary` instead of a fixed color value.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add colors-zinc
    ```

    This adds the default color variables.
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Copy these variables into your global stylesheet (for example `app/globals.css`):
      </Step>

      ```css title="app/globals.css"
      @theme inline {
        --color-destructive-foreground: var(--destructive-foreground);
        --color-info: var(--info);
        --color-info-foreground: var(--info-foreground);
        --color-success: var(--success);
        --color-success-foreground: var(--success-foreground);
        --color-warning: var(--warning);
        --color-warning-foreground: var(--warning-foreground);
      }

      :root {
        --background: oklch(1 0 0);
        --foreground: oklch(0.21 0.006 285.885);
        --card: oklch(1 0 0);
        --card-foreground: oklch(0.21 0.006 285.885);
        --popover: oklch(1 0 0);
        --popover-foreground: oklch(0.21 0.006 285.885);
        --primary: oklch(0.274 0.006 286.033);
        --primary-foreground: oklch(0.985 0 0);
        --secondary: oklch(0 0 0 / 4%);
        --secondary-foreground: oklch(0.21 0.006 285.885);
        --muted: oklch(0 0 0 / 4%);
        --muted-foreground: oklch(0.442 0.017 285.786);
        --accent: oklch(0 0 0 / 4%);
        --accent-foreground: oklch(0.21 0.006 285.885);
        --destructive: oklch(0.637 0.237 25.331);
        --destructive-foreground: oklch(0.505 0.213 27.518);
        --info: oklch(0.623 0.214 259.815);
        --info-foreground: oklch(0.488 0.243 264.376);
        --success: oklch(0.696 0.17 162.48);
        --success-foreground: oklch(0.508 0.118 165.612);
        --warning: oklch(0.769 0.188 70.08);
        --warning-foreground: oklch(0.555 0.163 48.998);
        --border: oklch(0 0 0 / 10%);
        --input: oklch(0 0 0 / 10%);
        --ring: oklch(0.705 0.015 286.067);
      }

      .dark {
        --background: oklch(0.141 0.005 285.823);
        --foreground: oklch(0.967 0.001 286.375);
        --card: color-mix(
          in srgb,
          oklch(0.21 0.006 285.885) 80%,
          oklch(0.141 0.005 285.823)
        );
        --card-foreground: oklch(0.967 0.001 286.375);
        --popover: oklch(0.21 0.006 285.885);
        --popover-foreground: oklch(0.967 0.001 286.375);
        --primary: oklch(0.967 0.001 286.375);
        --primary-foreground: oklch(0.21 0.006 285.885);
        --secondary: oklch(1 0 0 / 8%);
        --secondary-foreground: oklch(0.967 0.001 286.375);
        --muted: oklch(1 0 0 / 8%);
        --muted-foreground: oklch(0.705 0.015 286.067);
        --accent: oklch(1 0 0 / 8%);
        --accent-foreground: oklch(0.967 0.001 286.375);
        --destructive: oklch(0.637 0.237 25.331);
        --destructive-foreground: oklch(0.704 0.191 22.216);
        --info: oklch(0.623 0.214 259.815);
        --info-foreground: oklch(0.707 0.165 254.624);
        --success: oklch(0.696 0.17 162.48);
        --success-foreground: oklch(0.765 0.177 163.223);
        --warning: oklch(0.769 0.188 70.08);
        --warning-foreground: oklch(0.828 0.189 84.429);
        --border: oklch(1 0 0 / 12%);
        --input: oklch(1 0 0 / 12%);
        --ring: oklch(0.552 0.016 285.938);
      }
      ```
    </Steps>
  </TabsPanel>
</CodeTabs>

## Extended Color Variables [#extended-color-variables]

LoveUI adds extra variables for state-based UI such as alerts, badges, validation, and status messages:

* `--destructive-foreground`: Foreground color for destructive actions
* `--info`: Information state color
* `--info-foreground`: Foreground color for information states
* `--success`: Success state color
* `--success-foreground`: Foreground color for success states
* `--warning`: Warning state color
* `--warning-foreground`: Foreground color for warning states

If you install with CLI, these are added automatically.

## Customizing the theme [#customizing-the-theme]

To customize LoveUI, change the values in `:root` and `.dark`.

Keep the token names stable when possible. Components expect those names, and changing only the values lets every component update together.

When changing colors, check:

* Text contrast on light and dark backgrounds.
* Focus ring visibility.
* Disabled state visibility.
* Alert and badge readability.
* Destructive action clarity.

## Adding component-specific styles [#adding-component-specific-styles]

For one-off changes, update the class names in the copied component file.

For reusable changes, add or adjust variants in the component. This is useful for buttons, badges, cards, alerts, and other components that need a small set of approved styles.

Avoid hiding important state with only color. Pair color with text, icons, or labels when the state matters.


# Accordion (/docs/components/accordion)



<ComponentPreview name="accordion-demo" className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[80%] **:[.preview]:min-h-[400px]" align="start" />

## Overview [#overview]

Use an accordion when the page has related sections that should stay close together, but the user does not need to see every section at the same time.

Accordions work well for settings, FAQs, filters, details panels, and long forms with optional sections. Avoid them when all content must be compared side by side.

## Anatomy [#anatomy]

An accordion is made from an accordion root, one or more items, a trigger for each item, and content for each panel. The trigger should clearly describe what will open. The content should be short enough that opening one panel does not make the page hard to scan.

## Behavior [#behavior]

Use a single accordion when only one panel should be open. Use a multiple accordion when several panels can stay open at once. Use controlled state when the open panel needs to sync with routing, saved preferences, or another part of the page.

## Accessibility [#accessibility]

Keep triggers as real buttons, use clear headings, and make sure focus remains visible. Keyboard users should be able to tab to the trigger and open or close it with the keyboard.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add accordion
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="accordion" title="components/ui/accordion.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/components/ui/accordion"
```

```tsx
<Accordion>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionPanel>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionPanel>
  </AccordionItem>
</Accordion>
```

## Examples [#examples]

These examples show the main accordion modes: one open panel, many open panels, and externally controlled state.

### Single Accordion [#single-accordion]

Use this for compact pages where opening one section should close the previous section.

<ComponentPreview name="accordion-single" className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[80%] **:[.preview]:min-h-[400px]" align="start" />

### Multiple Accordion [#multiple-accordion]

Use this when each section is independent and users may need to keep several answers open.

<ComponentPreview name="accordion-multiple" className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[80%] **:[.preview]:min-h-[400px]" align="start" />

### Controlled Accordion [#controlled-accordion]

Use this when the open item must be controlled by your application state.

<ComponentPreview name="accordion-controlled" className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[80%] **:[.preview]:min-h-[400px]" align="start" />


# Alert (/docs/components/alert)



<ComponentPreview name="alert-demo" />

## Overview [#overview]

Use an alert to call attention to information that affects the current page or task.

Alerts are best for inline feedback, warnings, success messages, errors, and important context. They should be visible near the content they explain. Use a toast instead when the message is temporary and does not need to stay on the page.

Use Alert Dialog when the user must make a decision before the app can continue. Alert dialogs are for high-impact choices such as deleting data, leaving with unsaved changes, confirming a destructive action, or acknowledging a blocking error.

## Anatomy [#anatomy]

An alert usually has a container, optional icon, title, description, and optional actions. The title should be short. The description should explain what happened or what the user should do next.

An alert dialog has a trigger, popup, title, description, and actions. The title should state the decision. The description should explain the consequence. The actions should make the safe choice and the risky choice easy to distinguish.

## Variants [#variants]

Choose the variant by meaning, not by color preference. Use info for neutral guidance, success for completed work, warning for possible risk, error for a failed action, and destructive when the user is dealing with a harmful or irreversible action.

## Behavior [#behavior]

Keep alerts close to the content they explain. Keep alert dialogs short and focused. If a flow needs a form, browsing, or several steps, use Dialog or Sheet instead.

## Accessibility [#accessibility]

Do not rely on color alone. Pair state colors with clear text and, when useful, an icon. Keep action buttons keyboard reachable and avoid putting long instructions inside a small alert.

Alert dialogs should have a clear title and description. Keep focus inside the popup while it is open. Make sure the cancel action is easy to reach and that destructive actions use explicit copy such as `Delete project`, not vague copy like `OK`.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add alert
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Import the following variables into your CSS file
      </Step>

      ```css
      @theme inline {
        --color-destructive-foreground: var(--destructive-foreground);
        --color-info: var(--info);
        --color-info-foreground: var(--info-foreground);
        --color-success: var(--success);
        --color-success-foreground: var(--success-foreground);
        --color-warning: var(--warning);
        --color-warning-foreground: var(--warning-foreground);
      }

      :root {
        --destructive-foreground: oklch(0.704 0.191 22.216);
        --info: oklch(0.623 0.214 259.815);
        --info-foreground: oklch(0.707 0.165 254.624);
        --success: oklch(0.696 0.17 162.48);
        --success-foreground: oklch(0.765 0.177 163.223);
        --warning: oklch(0.769 0.188 70.08);
        --warning-foreground: oklch(0.828 0.189 84.429);
      }

      .dark {
        --destructive-foreground: oklch(0.704 0.191 22.216);
        --info: oklch(0.623 0.214 259.815);
        --info-foreground: oklch(0.707 0.165 254.624);
        --success: oklch(0.696 0.17 162.48);
        --success-foreground: oklch(0.765 0.177 163.223);
        --warning: oklch(0.769 0.188 70.08);
        --warning-foreground: oklch(0.828 0.189 84.429);
      }
      ```

      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="alert" title="components/ui/alert.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  Alert,
  AlertDescription,
  AlertDialog,
  AlertDialogClose,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogPopup,
  AlertDialogTitle,
  AlertDialogTrigger,
  AlertTitle,
} from "@/components/ui/alert"
```

```tsx
<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>
```

```tsx
<AlertDialog>
  <AlertDialogTrigger>Delete Account</AlertDialogTrigger>
  <AlertDialogPopup>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogClose>Cancel</AlertDialogClose>
      <AlertDialogClose>Delete Account</AlertDialogClose>
    </AlertDialogFooter>
  </AlertDialogPopup>
</AlertDialog>
```

## Examples [#examples]

The examples show alerts with icons, actions, and common state variants.

### With Icon [#with-icon]

Use an icon to make the alert easier to scan, especially in dense forms or settings pages.

<ComponentPreview name="alert-with-icon" />

### With Icon and Action Buttons [#with-icon-and-action-buttons]

Use actions when the alert can be resolved or explored from the same place.

<ComponentPreview name="alert-with-icon-action" />

### Info Alert [#info-alert]

Use info for neutral context or guidance.

<ComponentPreview name="alert-info" />

### Success Alert [#success-alert]

Use success when an action completed and the result should remain visible.

<ComponentPreview name="alert-success" />

### Warning Alert [#warning-alert]

Use warning when the user can continue but should understand a risk.

<ComponentPreview name="alert-warning" />

### Error Alert [#error-alert]

Use error when something failed and the user needs to correct it.

<ComponentPreview name="alert-error" />

## Alert Dialog [#alert-dialog]

Alert Dialog is included in the same component file. Use it only when the user must respond before continuing.

### Basic Alert Dialog [#basic-alert-dialog]

Use this pattern before a destructive or high-impact action.

<ComponentPreview name="alert-dialog-demo" />

### Close Confirmation [#close-confirmation]

Use this pattern when closing would discard work, interrupt a process, or hide important state.

<ComponentPreview name="dialog-close-confirmation" />


# Autocomplete (/docs/components/autocomplete)



<ComponentPreview name="autocomplete-demo" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

## Overview [#overview]

Use autocomplete when users type into an input and need suggestions from a list.

Autocomplete is useful for search, people pickers, command-style inputs, tags, addresses, and large option sets. It keeps typing as the main action while making valid choices easier to find.

## Anatomy [#anatomy]

Autocomplete includes an input, popup, list, items, and optional clear or trigger controls. The input owns the typed value. The popup shows matching suggestions. Each item should have clear display text and a stable value.

## Behavior [#behavior]

Use local filtering for small lists. Use async search for remote data. Add a limit when the full list is large. Auto-highlight can speed up keyboard selection, but it should not surprise users by choosing an item before they confirm.

## Accessibility [#accessibility]

Provide a label through Field or another visible label. Keep keyboard navigation intact, including arrow keys, Enter, Escape, and focus return. Make empty and loading states clear when suggestions come from a server.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add autocomplete
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="autocomplete" title="components/ui/autocomplete.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  Autocomplete,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
  AutocompleteList,
  AutocompletePopup,
} from "@/components/ui/autocomplete"
```

```tsx
const items = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
  { value: "grape", label: "Grape" },
]

<Autocomplete items={items}>
  <AutocompleteInput placeholder="Search..." />
  <AutocompletePopup>
    <AutocompleteEmpty>No results found.</AutocompleteEmpty>
    <AutocompleteList>
      {(item) => <AutocompleteItem key={item.value} value={item}>{item.label}</AutocompleteItem>}
    </AutocompleteList>
  </AutocompletePopup>
</Autocomplete>
```

## API Reference [#api-reference]

The `AutocompleteInput` component extends the original Base UI component with a few extra props:

| Prop          | Type                        | Default     | Description                                                                                      |
| ------------- | --------------------------- | ----------- | ------------------------------------------------------------------------------------------------ |
| `size`        | `"sm" \| "default" \| "lg"` | `"default"` | The size variant of the input field.                                                             |
| `showTrigger` | `boolean`                   | `false`     | Whether to display a trigger button (chevron icon) on the right side of the input.               |
| `showClear`   | `boolean`                   | `false`     | Whether to display a clear button (X icon) on the right side of the input when there is a value. |

## Examples [#examples]

These examples show disabled, sized, labeled, grouped, limited, async, and form-connected autocomplete patterns.

### Disabled [#disabled]

Use disabled when the user cannot search or choose yet.

<ComponentPreview name="autocomplete-disabled" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Small Size [#small-size]

Use the small size in compact toolbars, filters, or dense forms.

<ComponentPreview name="autocomplete-sm" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Large Size [#large-size]

Use the large size when the input is a primary search or selection control.

<ComponentPreview name="autocomplete-lg" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Label [#with-label]

Use a label whenever the autocomplete appears in a form or settings area.

<ComponentPreview name="autocomplete-with-label" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Inline Autocomplete [#inline-autocomplete]

Autofill the input with the highlighted item while navigating with arrow keys.

<ComponentPreview name="autocomplete-inline" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Auto Highlight [#auto-highlight]

Automatically highlight the first matching option.

<ComponentPreview name="autocomplete-autohighlight" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Clear Button [#with-clear-button]

Use a clear button when users often need to reset the value.

<ComponentPreview name="autocomplete-with-clear" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Trigger and Clear Buttons [#with-trigger-and-clear-buttons]

Use a trigger button when users may want to browse options without typing.

<ComponentPreview name="autocomplete-with-trigger-clear" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Groups [#with-groups]

Use groups when suggestions have meaningful categories.

<ComponentPreview name="autocomplete-grouped" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Limit Results [#with-limit-results]

Limit results to keep the popup quick to scan.

<ComponentPreview name="autocomplete-limit" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Async Search [#async-search]

Use async search when suggestions come from an API or remote index.

<ComponentPreview name="autocomplete-async" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Form Integration [#form-integration]

Use form integration when the selected value must be validated and submitted.

<ComponentPreview name="autocomplete-form" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />


# Avatar (/docs/components/avatar)



<ComponentPreview name="avatar-demo" />

## Overview [#overview]

Use an avatar to represent a person, team, account, or organization.

Avatars work best when they support identity, not when they carry critical information by themselves. Always pair them with names in places where identity must be unambiguous.

## Anatomy [#anatomy]

An avatar has an image and a fallback. The image is shown when it loads successfully. The fallback is shown when there is no image or the image fails to load.

## Usage guidance [#usage-guidance]

Use initials, an icon, or a neutral placeholder as the fallback. Keep avatar sizes consistent in the same surface. Use grouped avatars when showing a small set of collaborators or participants.

## Accessibility [#accessibility]

Use meaningful alt text when the avatar image adds identity. Use empty alt text when the visible name already identifies the person next to the image.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add avatar
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="avatar" title="components/ui/avatar.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
```

```tsx
<Avatar>
  <AvatarImage src="/avatars/01.png" alt="User avatar" />
  <AvatarFallback>CL</AvatarFallback>
</Avatar>
```

## Examples [#examples]

The examples show image fallback, size, radius, and grouped avatar patterns.

### Fallback Only [#fallback-only]

<ComponentPreview name="avatar-fallback" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Different Sizes [#different-sizes]

<ComponentPreview name="avatar-size" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Different Radius [#different-radius]

<ComponentPreview name="avatar-radius" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Group Avatars [#group-avatars]

<ComponentPreview name="avatar-group" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />


# Badge (/docs/components/badge)



<ComponentPreview name="badge-demo" />

## Overview [#overview]

Use a badge to display a short label, status, count, category, or metadata.

Badges should be compact and easy to scan. They are useful in tables, cards, headers, filters, and lists. Do not use a badge for long messages or primary actions.

## Anatomy [#anatomy]

A badge is usually a small inline container with text and optional icon. It can also render another element, such as a link, when the badge needs to be interactive.

## Variants [#variants]

Choose the variant by meaning. Outline is neutral, secondary is low emphasis, destructive is for dangerous state, and state variants such as info, success, warning, and error should match the status being shown.

## Accessibility [#accessibility]

Use readable text, not color alone. If a badge is a link, make sure the destination is clear from the visible text or surrounding context.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add badge
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Import the following variables into your CSS file
      </Step>

      ```css
      @theme inline {
        --color-destructive-foreground: var(--destructive-foreground);
        --color-info: var(--info);
        --color-info-foreground: var(--info-foreground);
        --color-success: var(--success);
        --color-success-foreground: var(--success-foreground);
        --color-warning: var(--warning);
        --color-warning-foreground: var(--warning-foreground);
      }

      :root {
        --destructive-foreground: oklch(0.505 0.213 27.518);
        --info: oklch(0.623 0.214 259.815);
        --info-foreground: oklch(0.488 0.243 264.376);
        --success: oklch(0.696 0.17 162.48);
        --success-foreground: oklch(0.508 0.118 165.612);
        --warning: oklch(0.769 0.188 70.08);
        --warning-foreground: oklch(0.555 0.163 48.998);
      }

      .dark {
        --destructive-foreground: oklch(0.704 0.191 22.216);
        --info: oklch(0.623 0.214 259.815);
        --info-foreground: oklch(0.707 0.165 254.624);
        --success: oklch(0.696 0.17 162.48);
        --success-foreground: oklch(0.765 0.177 163.223);
        --warning: oklch(0.769 0.188 70.08);
        --warning-foreground: oklch(0.828 0.189 84.429);
      }
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="badge" title="components/ui/badge.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import { Badge } from "@/components/ui/badge"
```

```tsx
<Badge>Badge</Badge>
```

## Link [#link]

You can use the [`render`](https://base-ui.com/react/utils/use-render#migrating-from-radix-ui) prop to make another component look like a badge. Here's an example of a link that looks like a badge.

```tsx
import Link from "next/link"

import { Badge } from "@/components/ui/badge"

export function LinkAsBadge() {
  return <Badge render={<Link href="/pricing" />}>New</Badge>
}
```

## Examples [#examples]

The examples show visual variants, sizes, icon support, and link rendering.

### Outline [#outline]

<ComponentPreview name="badge-outline" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Secondary [#secondary]

<ComponentPreview name="badge-secondary" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Destructive [#destructive]

<ComponentPreview name="badge-destructive" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Info [#info]

<ComponentPreview name="badge-info" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Success [#success]

<ComponentPreview name="badge-success" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Warning [#warning]

<ComponentPreview name="badge-warning" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Error [#error]

<ComponentPreview name="badge-error" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Small [#small]

<ComponentPreview name="badge-sm" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Large [#large]

<ComponentPreview name="badge-lg" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### With Icon [#with-icon]

<ComponentPreview name="badge-with-icon" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### With Link [#with-link]

<ComponentPreview name="badge-with-link" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />


# Breadcrumb (/docs/components/breadcrumb)



<ComponentPreview name="breadcrumb-demo" />

## Overview [#overview]

Use breadcrumbs to show where the current page sits in a hierarchy.

Breadcrumbs work best for nested products, documentation, settings, folders, and admin sections. They should not replace the main navigation. They help users understand context and move up one or more levels.

## Anatomy [#anatomy]

A breadcrumb has a list, items, links, separators, and a current page item. Earlier items are usually links. The current item usually is not a link.

## Usage guidance [#usage-guidance]

Keep labels short. Start with the highest useful parent, not always the site root. Use custom separators only when they still read clearly between items.

## Accessibility [#accessibility]

Wrap breadcrumbs in navigation with a clear label. Mark the current page so assistive technology can distinguish it from links.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add breadcrumb
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="breadcrumb" title="components/ui/breadcrumb.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
```

```tsx
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```

## Examples [#examples]

The example shows how to change the separator while keeping the same hierarchy.

### With custom separator [#with-custom-separator]

<ComponentPreview name="breadcrumb-custom-separator" />


# Button (/docs/components/button)



<ComponentPreview name="button-demo" />

## Overview [#overview]

Use a button for actions. A button should do something on the current page, submit a form, open a menu, start a task, or confirm a choice.

Use a link when the user is navigating to another page. If a link must look like a button, render the link through the button component so the visual style is shared while the semantics stay correct.

## Anatomy [#anatomy]

A button has a visible label, optional icon, variant, size, and state. The label should describe the action directly. Prefer `Save changes`, `Invite member`, or `Delete project` over vague labels like `Submit` or `Continue` when the result is specific.

## Variants [#variants]

Use the default variant for primary actions, secondary for supporting actions, outline for medium emphasis, ghost for low emphasis, link for inline actions, and destructive for dangerous actions.

## Accessibility [#accessibility]

Buttons must have accessible names. Icon-only buttons need a label through text, `aria-label`, or an equivalent pattern. Keep disabled and loading states clear so users understand why the action is unavailable.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add button
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Import the following variables into your CSS file
      </Step>

      ```css
      @theme inline {
        --color-destructive-foreground: var(--destructive-foreground);
      }

      :root {
        --destructive-foreground: oklch(0.505 0.213 27.518);
      }

      .dark {
        --destructive-foreground: oklch(0.704 0.191 22.216);
      }
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="button" title="components/ui/button.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import { Button } from "@/components/ui/button"
```

```tsx
<Button>Button</Button>
```

## Link [#link]

You can use the [`render`](https://base-ui.com/react/utils/use-render#migrating-from-radix-ui) prop to make another component look like a button. Here's an example of a link that looks like a button.

```tsx
import Link from "next/link"

import { Button } from "@/components/ui/button"

export function LinkAsButton() {
  return <Button render={<Link href="/login" />}>Login</Button>
}
```

## Examples [#examples]

The examples show variants, sizes, icon layouts, disabled state, link rendering, and loading behavior.

### Default [#default]

<ComponentPreview name="button-demo" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Outline [#outline]

<ComponentPreview name="button-outline" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Secondary [#secondary]

<ComponentPreview name="button-secondary" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Destructive [#destructive]

<ComponentPreview name="button-destructive" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Destructive Outline [#destructive-outline]

<ComponentPreview name="button-destructive-outline" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Ghost [#ghost]

<ComponentPreview name="button-ghost" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Link [#link-1]

<ComponentPreview name="button-link" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Extra-small Size [#extra-small-size]

<ComponentPreview name="button-xs" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Small Size [#small-size]

<ComponentPreview name="button-sm" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Large Size [#large-size]

<ComponentPreview name="button-lg" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Extra-large Size [#extra-large-size]

<ComponentPreview name="button-xl" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Disabled [#disabled]

<ComponentPreview name="button-disabled" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Icon [#icon]

<ComponentPreview name="button-icon" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Icon Small Size [#icon-small-size]

<ComponentPreview name="button-icon-sm" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Icon Large Size [#icon-large-size]

<ComponentPreview name="button-icon-lg" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### With Icon [#with-icon]

<ComponentPreview name="button-with-icon" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### With Link [#with-link]

<ComponentPreview name="button-with-link" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Loading [#loading]

<ComponentPreview name="button-loading" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />


# Card (/docs/components/card)



<ComponentPreview name="card-demo" />

## Overview [#overview]

Use a card to group related content and actions inside a clear surface.

Cards work well for dashboards, settings groups, pricing items, summaries, and repeated list items. Avoid nesting cards inside cards unless each layer has a clear job.

## Anatomy [#anatomy]

A card usually has a container, header, title, description, content, footer, and actions. Not every card needs every part. Keep the structure simple and make the most important information easy to scan first.

## Usage guidance [#usage-guidance]

Use cards for repeated items or self-contained content groups. For broad page sections, prefer normal page layout instead of turning every section into a card.

## Accessibility [#accessibility]

Use real headings when the card introduces a section. If the whole card is clickable, make the interactive target clear and preserve keyboard access.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add card
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="card" title="components/ui/card.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardPanel,
  CardTitle,
} from "@/components/ui/card"
```

```tsx
<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardPanel>Content</CardPanel>
  <CardFooter>Footer</CardFooter>
</Card>
```


# Checkbox (/docs/components/checkbox)



<ComponentPreview name="checkbox-demo" />

## Overview [#overview]

Use a checkbox when the user can turn an independent option on or off.

Checkboxes are right for preferences, permissions, optional settings, and multi-select lists. Use a radio group when the user must choose exactly one option from a set.

Use Checkbox Group when several checkboxes belong to the same question or setting. Groups are useful for permissions, filters, notification channels, roles, and feature selections where more than one option can be selected.

## Anatomy [#anatomy]

A checkbox has an input, visual indicator, label, optional description, and state. The label should make sense when read on its own.

A checkbox group provides shared state and contains individual checkbox items. It should have a group label or surrounding Fieldset so users understand what the choices are about.

## Behavior [#behavior]

A checkbox can be checked, unchecked, disabled, or invalid. Some grouped checkbox patterns also use an indeterminate parent state to show that only some child items are selected.

Use disabled items for options that are visible but unavailable. Use parent checkboxes when a group needs select-all behavior. Use nested parent checkboxes when choices are hierarchical.

## Accessibility [#accessibility]

Always connect the checkbox to a label. Descriptions and errors should be associated through Field when the checkbox appears in a form.

Group related checkboxes with a visible label. Make sure each checkbox has its own label and that parent states are understandable through text, not only the visual indeterminate mark.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add checkbox
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="checkbox" title="components/ui/checkbox.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import { Checkbox, CheckboxGroup } from "@/components/ui/checkbox"
```

```tsx
<Checkbox />
```

```tsx
<CheckboxGroup defaultValue={["next"]}>
  <Label>
    <Checkbox value="next" />
    Next.js
  </Label>
  <Label>
    <Checkbox value="vite" />
    Vite
  </Label>
  <Label>
    <Checkbox value="astro" />
    Astro
  </Label>
</CheckboxGroup>
```

## Examples [#examples]

The examples show disabled, described, card-style, and form-connected checkboxes.

For accessible labelling and validation, prefer using the `Field` component to wrap checkboxes. See the related example: [Checkbox field](/ui/docs/components/field#checkbox-field).

### Disabled [#disabled]

<ComponentPreview name="checkbox-disabled" />

### With Description [#with-description]

<ComponentPreview name="checkbox-with-description" />

### Card Style [#card-style]

<ComponentPreview name="checkbox-card" />

### Form Integration [#form-integration]

Field provides accessible labelling and validation primitives for form controls. Use it with `Form` to submit values.

<ComponentPreview name="checkbox-form" />

## Checkbox Group [#checkbox-group]

Checkbox Group is included in the same component file. Use it when several checkboxes answer the same question or share one submitted value.

For accessible group labelling and validation, prefer wrapping checkbox groups with `Field` and `Fieldset`. See the related example: [Checkbox group field](/ui/docs/components/field#checkbox-group-field).

### Basic Group [#basic-group]

<ComponentPreview name="checkbox-group-demo" />

### With Disabled Item [#with-disabled-item]

<ComponentPreview name="checkbox-group-disabled" />

### Parent Checkbox [#parent-checkbox]

<ComponentPreview name="checkbox-group-parent" />

### Nested Parent Checkbox [#nested-parent-checkbox]

<ComponentPreview name="checkbox-group-nested-parent" />

### Group Form Integration [#group-form-integration]

<ComponentPreview name="checkbox-group-form" />


# Collapsible (/docs/components/collapsible)



<ComponentPreview name="collapsible-demo" />

## Overview [#overview]

Use a collapsible when one piece of content can be shown or hidden by a single control.

Collapsible is simpler than accordion. It is a good fit for optional details, advanced settings, helper text, or a single expandable section.

## Anatomy [#anatomy]

A collapsible has a root, trigger, and content. The trigger controls whether the content is visible. The content should be directly related to the trigger.

## Behavior [#behavior]

Use collapsible when there is only one expandable region. If you have several related expandable regions, use Accordion instead.

## Accessibility [#accessibility]

The trigger should be a real button with clear text. Keep focus visible and make sure the expanded state is communicated by the primitive.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add collapsible
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="collapsible" title="components/ui/collapsible.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  Collapsible,
  CollapsiblePanel,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
```

```tsx
<Collapsible>
  <CollapsibleTrigger>Can I access the file in the cloud?</CollapsibleTrigger>
  <CollapsiblePanel>
    Yes, you can access the file in the cloud.
  </CollapsiblePanel>
</Collapsible>
```


# Combobox (/docs/components/combobox)



<ComponentPreview name="combobox-demo" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

## Overview [#overview]

Use a combobox when users choose one or more values from a list and search or filtering helps them find the right option.

Combobox is useful for large lists, people pickers, labels, projects, countries, commands, and multi-select workflows.

## Anatomy [#anatomy]

A combobox has a trigger or input, popup, list, items, and selection state. Single-selection comboboxes store one value. Multiple-selection comboboxes store a list of values.

## Behavior [#behavior]

Use single selection when one value is allowed. Use multiple selection for tags, filters, permissions, or categories. Use clear buttons when users often reset the value.

## Accessibility [#accessibility]

Give the combobox a label and keep keyboard navigation intact. Users should be able to open the popup, move through options, select items, clear values, and close the popup without a mouse.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add combobox
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="combobox" title="components/ui/combobox.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

### Single Selection [#single-selection]

```tsx
import {
  Combobox,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
} from "@/components/ui/combobox"
```

```tsx
const items = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
  { value: "grape", label: "Grape" },
]

<Combobox items={items}>
  <ComboboxInput placeholder="Select an item..." />
  <ComboboxPopup>
    <ComboboxEmpty>No results found.</ComboboxEmpty>
    <ComboboxList>
      {(item) => <ComboboxItem key={item.value} value={item}>{item.label}</ComboboxItem>}
    </ComboboxList>
  </ComboboxPopup>
</Combobox>
```

### Multiple Selection [#multiple-selection]

```tsx
import {
  Combobox,
  ComboboxChip,
  ComboboxChips,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
  ComboboxValue,
} from "@/components/ui/combobox"
```

```tsx
const items = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
  { value: "grape", label: "Grape" },
]

<Combobox items={items} multiple>
  <ComboboxChips>
    <ComboboxValue>
      {(value: { value: string; label: string }[]) => (
        <>
          {value?.map((item) => (
            <ComboboxChip key={item.value} aria-label={item.value}>
              {item.label}
            </ComboboxChip>
          ))}
          <ComboboxInput
            placeholder={value.length > 0 ? undefined : "Select a Select an item..."}
            aria-label="Select an item"
          />
        </>
      )}
    </ComboboxValue>
  </ComboboxChips>
  <ComboboxPopup>
    <ComboboxEmpty>No results found.</ComboboxEmpty>
    <ComboboxList>
      {(item) => <ComboboxItem value={item}>{item.label}</ComboboxItem>}
    </ComboboxList>
  </ComboboxPopup>
</Combobox>
```

## API Reference [#api-reference]

The `ComboboxInput` component extends the original Base UI component with a few extra props:

| Prop          | Type                        | Default     | Description                                                                                      |
| ------------- | --------------------------- | ----------- | ------------------------------------------------------------------------------------------------ |
| `size`        | `"sm" \| "default" \| "lg"` | `"default"` | The size variant of the input field.                                                             |
| `showTrigger` | `boolean`                   | `true`      | Whether to display a trigger button (chevron icon) on the right side of the input.               |
| `showClear`   | `boolean`                   | `false`     | Whether to display a clear button (X icon) on the right side of the input when there is a value. |

## Examples [#examples]

The examples show disabled, sized, labeled, grouped, single-selection, multiple-selection, input-in-popup, and form-connected comboboxes.

### Disabled [#disabled]

<ComponentPreview name="combobox-disabled" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Small Size [#small-size]

<ComponentPreview name="combobox-sm" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Large Size [#large-size]

<ComponentPreview name="combobox-lg" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Label [#with-label]

<ComponentPreview name="combobox-with-label" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Auto Highlight [#auto-highlight]

Automatically highlight the first matching option.

<ComponentPreview name="combobox-autohighlight" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Clear Button [#with-clear-button]

<ComponentPreview name="combobox-with-clear" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Groups [#with-groups]

<ComponentPreview name="combobox-grouped" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Multiple Selection [#with-multiple-selection]

<ComponentPreview name="combobox-multiple" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Input Inside Popup [#with-input-inside-popup]

<ComponentPreview name="combobox-with-inner-input" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Form Integration [#form-integration]

<ComponentPreview name="combobox-form" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Form Integration - Multiple [#form-integration---multiple]

<ComponentPreview name="combobox-multiple-form" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />


# Dialog (/docs/components/dialog)



<ComponentPreview name="dialog-demo" />

## Overview [#overview]

Use a dialog when the user needs to focus on a task without leaving the current page.

Dialogs are good for forms, confirmations, detail views, short workflows, and focused editing. Avoid dialogs for large multi-step experiences that need a full page.

## Anatomy [#anatomy]

A dialog has a trigger, popup, header, title, description, content, footer, and close action. The title should explain the task. The footer usually contains the main action and a cancel or close action.

## Behavior [#behavior]

Dialogs open above the page and should keep focus inside while open. Use nested dialogs only when the second dialog is a true interruption, such as confirming a close action.

## Accessibility [#accessibility]

Always provide a title. Add a description when the task needs context. Make sure destructive actions are explicit and that focus returns to the trigger when the dialog closes.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add dialog
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="dialog" title="components/ui/dialog.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  Dialog,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPopup,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
```

```tsx
<Dialog>
  <DialogTrigger>Open Dialog</DialogTrigger>
  <DialogPopup>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog Description</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose>Close</DialogClose>
    </DialogFooter>
  </DialogPopup>
</Dialog>
```

## Examples [#examples]

The examples show opening from a menu, nesting, and confirming close actions.

### Open from a Menu [#open-from-a-menu]

<ComponentPreview name="dialog-from-menu" />

### Nested Dialogs [#nested-dialogs]

<ComponentPreview name="dialog-nested" />

### Close Confirmation [#close-confirmation]

<ComponentPreview name="dialog-close-confirmation" />


# Empty (/docs/components/empty)



<ComponentPreview name="empty-demo" />

## Overview [#overview]

Use Empty when a section has no content to show yet.

Empty states should explain what is missing and give the user a useful next action. They are common in dashboards, tables, lists, search results, inboxes, and setup flows.

## Anatomy [#anatomy]

An empty state can include media, a title, description, content, and actions. Keep the title short and use the description to explain why the state exists or how to move forward.

## Usage guidance [#usage-guidance]

Write empty states for the real cause. `No projects yet` is better than `Nothing here`. Add an action when the user can create, import, clear filters, or retry.

## Accessibility [#accessibility]

Use normal headings and buttons. Do not rely on illustration alone to explain the state.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add empty
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="empty" title="components/ui/empty.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
```

```tsx
<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <Icon />
    </EmptyMedia>
    <EmptyTitle>No data</EmptyTitle>
    <EmptyDescription>No data found</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Add data</Button>
  </EmptyContent>
</Empty>
```

## API Reference [#api-reference]

### Empty [#empty]

The main component of the empty state. Wraps the `EmptyHeader` and `EmptyContent` components.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<Empty>
  <EmptyHeader />
  <EmptyContent />
</Empty>
```

### EmptyHeader [#emptyheader]

The `EmptyHeader` component wraps the empty media, title, and description.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<EmptyHeader>
  <EmptyMedia />
  <EmptyTitle />
  <EmptyDescription />
</EmptyHeader>
```

### EmptyMedia [#emptymedia]

Use the `EmptyMedia` component to display the media of the empty state such as an icon or an image. You can also use it to display other components such as an avatar.

| Prop        | Type                  | Default   |
| ----------- | --------------------- | --------- |
| `variant`   | `"default" \| "icon"` | `default` |
| `className` | `string`              |           |

```tsx
<EmptyMedia variant="icon">
  <Icon />
</EmptyMedia>
```

```tsx
<EmptyMedia>
  <Avatar>
    <AvatarImage src="..." />
    <AvatarFallback>CL</AvatarFallback>
  </Avatar>
</EmptyMedia>
```

### EmptyTitle [#emptytitle]

Use the `EmptyTitle` component to display the title of the empty state.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<EmptyTitle>No data</EmptyTitle>
```

### EmptyDescription [#emptydescription]

Use the `EmptyDescription` component to display the description of the empty state.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<EmptyDescription>You do not have any notifications.</EmptyDescription>
```

### EmptyContent [#emptycontent]

Use the `EmptyContent` component to display the content of the empty state such as a button, input or a link.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<EmptyContent>
  <Button>Add Project</Button>
</EmptyContent>
```


# Field (/docs/components/field)



<ComponentPreview name="field-demo" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

## Overview [#overview]

Use Field to wrap a form control with a label, description, validation message, and disabled or invalid state.

Field keeps form layout consistent and helps connect supporting text to the control.

## Anatomy [#anatomy]

A field usually includes a label, control, description, and error message. The control can be an input, textarea, select, checkbox, radio group, slider, switch, combobox, or custom form element.

## Behavior [#behavior]

Use required, disabled, invalid, and validity states to match the real form state. Keep validation messages close to the control they explain.

## Accessibility [#accessibility]

Field is most useful when it connects labels, descriptions, and errors in a way screen readers can understand. Use clear labels and specific error messages.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add field
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="field" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" title="components/ui/field.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  Field,
  FieldControl,
  FieldDescription,
  FieldError,
  FieldLabel,
  FieldValidity,
} from "@/components/ui/field"
```

```tsx
<Field>
  <FieldLabel>Name</FieldLabel>
  <FieldControl type="text" placeholder="Enter your name" />
  <FieldDescription>Visible on your profile</FieldDescription>
  <FieldError>Please enter a valid name</FieldError>
  <FieldValidity>
    {(validity) => (
      {validity.error && <p>{validity.error}</p>}
    )}
  </FieldValidity>
</Field>
```

## Examples [#examples]

The examples show Field with required, disabled, error, validity, and many different form controls.

### Required Field [#required-field]

<ComponentPreview name="field-required" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Disabled Field [#disabled-field]

<ComponentPreview name="field-disabled" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Error [#with-error]

Enter an invalid email address and press enter to see the error.

<ComponentPreview name="field-error" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Validity [#with-validity]

<ComponentPreview name="field-validity" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-80" />

### Autocomplete Field [#autocomplete-field]

<ComponentPreview name="field-autocomplete" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Combobox Field [#combobox-field]

<ComponentPreview name="field-combobox" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Combobox Multiple Field [#combobox-multiple-field]

<ComponentPreview name="field-combobox-multiple" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Textarea Field [#textarea-field]

<ComponentPreview name="field-textarea" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Select Field [#select-field]

<ComponentPreview name="field-select" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Checkbox Field [#checkbox-field]

<ComponentPreview name="field-checkbox" />

### Checkbox Group Field [#checkbox-group-field]

<ComponentPreview name="field-checkbox-group" />

### Radio Group Field [#radio-group-field]

<ComponentPreview name="field-radio" />

### Switch Field [#switch-field]

<ComponentPreview name="field-switch" />

### Slider Field [#slider-field]

<ComponentPreview name="field-slider" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Number Field [#number-field]

<ComponentPreview name="field-number-field" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Complete Form Example [#complete-form-example]

<ComponentPreview name="field-complete-form" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />


# Fieldset (/docs/components/fieldset)



<ComponentPreview name="fieldset-demo" />

## Overview [#overview]

Use Fieldset to group related form controls under one legend.

Fieldset is useful for radio groups, checkbox groups, address sections, permission groups, and any form area where several inputs answer one larger question.

## Anatomy [#anatomy]

A fieldset has a container, legend, optional description, and controls. The legend names the group. The controls inside should all relate to that group.

## Usage guidance [#usage-guidance]

Use Field for one control. Use Fieldset for a set of related controls. Combine both when each control in the group also needs its own label, description, or error.

## Accessibility [#accessibility]

The legend gives assistive technology context for the controls inside. Keep it visible and specific.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add fieldset
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="fieldset" title="components/ui/fieldset.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import { Fieldset, FieldsetLegend } from "@/components/ui/fieldset"
```

```tsx
<Fieldset>
  <FieldsetLegend>Fieldset legend</FieldsetLegend>
</Fieldset>
```


# Form (/docs/components/form)



<ComponentPreview name="form-demo" />

## Overview [#overview]

Use Form to handle form submission, validation, and shared form state.

Form is useful when multiple fields need to be submitted together or validated together. It works well with Field and the form examples across the docs.

## Anatomy [#anatomy]

A form includes the form root, fields, controls, validation messages, and submit actions. Each field should have a label and a clear error message when validation fails.

## Behavior [#behavior]

Keep submission state clear. Disable or show loading on the submit action while a request is running. Show errors near the fields that need attention.

## Accessibility [#accessibility]

Use labels, descriptions, and errors consistently. Make sure keyboard users can reach every field and submit or cancel the form.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add form
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react zod
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="form" title="components/ui/form.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  Field,
  FieldControl,
  FieldError,
  FieldLabel,
} from "@/components/ui/field"
import { Form } from "@/components/ui/form"
```

```tsx
<Form
  onSubmit={(e) => {
    /* handle submit */
  }}
>
  <Field>
    <FieldLabel>Email</FieldLabel>
    <FieldControl name="email" type="email" required />
    <FieldError>Please enter a valid email.</FieldError>
  </Field>
</Form>
```

## Examples [#examples]

The examples show basic form structure and schema validation with Zod.

### Using with Zod [#using-with-zod]

<ComponentPreview name="form-zod" />


# Frame (/docs/components/frame)



<ComponentPreview name="frame-demo" />

## Overview [#overview]

Use Frame when you need a simple bordered surface around related content.

Frame is lighter than Card. It works well for previews, examples, media, code-adjacent content, and small grouped regions that do not need card header or footer structure.

## Anatomy [#anatomy]

A frame is mainly a container. It gives content a boundary without adding a full card layout.

## Usage guidance [#usage-guidance]

Use Frame for visual grouping. Use Card when the content needs a title, description, content area, and actions.

## Accessibility [#accessibility]

Frame does not add meaning by itself. Use headings, labels, and semantic HTML inside it when the grouped content needs structure.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add frame
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="frame" title="components/ui/frame.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  Frame,
  FrameDescription,
  FrameFooter,
  FrameHeader,
  FramePanel,
  FrameTitle,
} from "@/components/ui/frame"
```

```tsx
<Frame>
  <FrameHeader>
    <FrameTitle>Title</FrameTitle>
    <FrameDescription>Description</FrameDescription>
  </FrameHeader>
  <FramePanel>Content</FramePanel>
  <FrameFooter>Footer</FrameFooter>
</Frame>
```


# Group (/docs/components/group)



<ComponentPreview name="group-demo" />

## Overview [#overview]

Use Group to visually connect controls that work together.

Group is useful for segmented inputs, attached buttons, search boxes with actions, and compact control sets.

## Anatomy [#anatomy]

A group wraps multiple controls and adjusts their borders or radius so they read as one unit.

## Usage guidance [#usage-guidance]

Use Group when controls are part of the same action. Do not group unrelated buttons just to save space.

## Accessibility [#accessibility]

Grouped controls still need their own labels or accessible names. Keyboard order should follow the visual order.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add group
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="group" title="components/ui/group.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import { Button } from "@/components/ui/button"
import { Group, GroupItem, GroupSeparator } from "@/components/ui/group"
```

```tsx
<Group>
  <GroupItem render={<Button />}>Button</GroupItem>
  <GroupSeparator />
  <GroupItem render={<Button />}>Button</GroupItem>
</Group>
```

## Examples [#examples]

The example shows an input attached to an action.

### With Input [#with-input]

<ComponentPreview name="group-with-input" />


# Input (/docs/components/input)



<ComponentPreview name="input-demo" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

## Overview [#overview]

Use Input for short free-form text, numbers, email addresses, URLs, search terms, and file selection.

Input is a low-level control. In forms, wrap it with Field so users get a label, description, error, and disabled state in a consistent layout.

## Anatomy [#anatomy]

An input has a value, placeholder, type, size, disabled state, and optional surrounding controls. The placeholder should never replace a real label.

## Usage guidance [#usage-guidance]

Choose the native input type that matches the data. Use `email` for email, `search` for search, `file` for files, and so on. Use Textarea for longer multi-line text.

## Accessibility [#accessibility]

Always provide a label. Use clear validation messages and keep focus styles visible.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add input
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="input" title="components/ui/input.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import { Input } from "@/components/ui/input"
```

```tsx
<Input />
```

## Examples [#examples]

The examples show sizes, disabled state, file input, labels, attached buttons, and form usage.

For accessible labelling and validation, prefer using the `Field` component to wrap inputs, or the `FieldControl` component. See some [related examples](/ui/docs/components/field).

### Small Size [#small-size]

<ComponentPreview name="input-sm" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Large Size [#large-size]

<ComponentPreview name="input-lg" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Disabled [#disabled]

<ComponentPreview name="input-disabled" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### File [#file]

<ComponentPreview name="input-file" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Label [#with-label]

<ComponentPreview name="input-with-label" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Button [#with-button]

<ComponentPreview name="input-with-button" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Form Integration [#form-integration]

<ComponentPreview name="form-demo" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />


# Label (/docs/components/label)



<ComponentPreview name="input-with-label" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

## Overview [#overview]

Use Label to name a form control.

Labels help every user understand what a control does. They are also required for good screen-reader and click-target behavior.

## Anatomy [#anatomy]

A label is connected to a control. The visible text should be short, specific, and stable.

## Usage guidance [#usage-guidance]

Use Field when you need a label plus description or validation. Use Label directly when you only need the label primitive.

## Accessibility [#accessibility]

Do not replace labels with placeholders. A placeholder disappears when the user types and is not enough context for many users.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add label
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="label" title="components/ui/label.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import { Label } from "@/components/ui/label"
```

```tsx
<Label htmlFor="email">Email</Label>
```

## Examples [#examples]

The example shows Label connected to a checkbox.

For accessible labelling and validation, prefer using the `FieldLabel` component. See some [related examples](/ui/docs/components/field).

### With Checkbox [#with-checkbox]

<ComponentPreview name="checkbox-demo" />


# Menu (/docs/components/menu)



<ComponentPreview name="menu-demo" />

## Overview [#overview]

Use Menu for a compact list of actions or choices opened from a trigger.

Menus are useful for overflow actions, account menus, row actions, editor commands, and grouped command lists. Do not use a menu for primary navigation when links should stay visible.

## Anatomy [#anatomy]

A menu has a trigger, popup, items, optional groups, labels, separators, checkbox items, radio items, links, and nested submenus.

## Behavior [#behavior]

Keep menu labels short and action-oriented. Use nested menus sparingly because they require more pointer and keyboard precision.

## Accessibility [#accessibility]

Menu items should be reachable with keyboard navigation. Use checkbox and radio menu items only when the checked state matters inside the menu.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add menu
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Import the following variables into your CSS file
      </Step>

      ```css
      @theme inline {
        --color-destructive-foreground: var(--destructive-foreground);
      }

      :root {
        --destructive-foreground: oklch(0.505 0.213 27.518);
      }

      .dark {
        --destructive-foreground: oklch(0.704 0.191 22.216);
      }
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="menu" title="components/ui/menu.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  Menu,
  MenuCheckboxItem,
  MenuGroup,
  MenuGroupLabel,
  MenuItem,
  MenuPopup,
  MenuRadioGroup,
  MenuRadioItem,
  MenuSeparator,
  MenuSub,
  MenuSubPopup,
  MenuSubTrigger,
  MenuTrigger,
} from "@/components/ui/menu"
```

```tsx
<Menu>
  <MenuTrigger>Open</MenuTrigger>
  <MenuPopup align="start" sideOffset={4}>
    <MenuItem>Profile</MenuItem>
    <MenuSeparator />

    <MenuGroup>
      <MenuGroupLabel>Playback</MenuGroupLabel>
      <MenuItem>Play</MenuItem>
      <MenuItem>Pause</MenuItem>
    </MenuGroup>

    <MenuSeparator />

    <MenuCheckboxItem>Shuffle</MenuCheckboxItem>
    <MenuCheckboxItem>Repeat</MenuCheckboxItem>

    <MenuSeparator />

    <MenuGroup>
      <MenuGroupLabel>Sort by</MenuGroupLabel>
      <MenuRadioGroup>
        <MenuRadioItem>Artist</MenuRadioItem>
        <MenuRadioItem>Album</MenuRadioItem>
        <MenuRadioItem>Title</MenuRadioItem>
      </MenuRadioGroup>
    </MenuGroup>

    <MenuSeparator />

    <MenuSub>
      <MenuSubTrigger>Add to playlist</MenuSubTrigger>
      <MenuSubPopup>
        <MenuItem>Jazz</MenuItem>
        <MenuItem>Rock</MenuItem>
      </MenuSubPopup>
    </MenuSub>
  </MenuPopup>
</Menu>
```

## Examples [#examples]

The examples show hover opening, checkbox items, radio groups, links, group labels, nesting, close behavior, and opening a dialog.

### Open on Hover [#open-on-hover]

<ComponentPreview name="menu-hover" />

### With Checkbox [#with-checkbox]

<ComponentPreview name="menu-checkbox" />

### With Radio Group [#with-radio-group]

<ComponentPreview name="menu-radio-group" />

### With Link [#with-link]

<ComponentPreview name="menu-link" />

### With Group Label [#with-group-label]

<ComponentPreview name="menu-group-labels" />

### Nested Menu [#nested-menu]

<ComponentPreview name="menu-nested" />

### Close on Click [#close-on-click]

<ComponentPreview name="menu-close-on-click" />

### Open a Dialog [#open-a-dialog]

<ComponentPreview name="dialog-from-menu" />


# Meter (/docs/components/meter)



<ComponentPreview name="meter-demo" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

## Overview [#overview]

Use Meter to show a known numeric value within a known range.

Meter is useful for storage usage, quota, health, score, strength, capacity, and other measured values. Use Progress instead when a task is actively moving toward completion.

## Anatomy [#anatomy]

A meter has a value, minimum, maximum, optional label, optional formatted value, and visual bar.

## Usage guidance [#usage-guidance]

Use a label and value when the number matters. Use range styling when different portions of the range have meaning, such as low, normal, and high.

## Accessibility [#accessibility]

Expose the value in text when precision matters. Do not rely only on bar length or color.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add meter
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="meter" title="components/ui/meter.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import { Meter, MeterLabel, MeterValue } from "@/components/ui/meter"
```

```tsx
<Meter value={40}>
  <MeterLabel>Progress</MeterLabel>
  <MeterValue />
</Meter>
```

## Examples [#examples]

The examples show a simple meter, formatted value, and range-based display.

### Without Label and Value [#without-label-and-value]

<ComponentPreview name="meter-simple" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Formatted Value [#with-formatted-value]

<ComponentPreview name="meter-with-formatted-value" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Range [#with-range]

<ComponentPreview name="meter-with-range" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />


# Number Field (/docs/components/number-field)



<ComponentPreview name="number-field-demo" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

## Overview [#overview]

Use Number Field when users need to enter or adjust a numeric value.

Number Field is useful for quantities, limits, prices, percentages, durations, counts, and settings where incrementing or decrementing is helpful.

## Anatomy [#anatomy]

A number field has an input, value, increment and decrement controls, optional scrub area, range constraints, step size, and formatted display.

## Behavior [#behavior]

Set sensible minimum, maximum, and step values. Use formatting when the number represents currency, percent, units, or other structured values.

## Accessibility [#accessibility]

Provide a label and make sure the increment and decrement controls have accessible names. Keep typed input available for keyboard users.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add number-field
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="number-field" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" title="components/ui/number-field.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
  NumberFieldScrubArea,
} from "@/components/ui/number-field"
```

```tsx
<NumberField defaultValue={0}>
  <NumberFieldScrubArea label="Quantity" />
  <NumberFieldGroup>
    <NumberFieldDecrement />
    <NumberFieldInput />
    <NumberFieldIncrement />
  </NumberFieldGroup>
</NumberField>
```

## Examples [#examples]

The examples show sizes, disabled state, external labels, scrub input, ranges, formatting, step values, and form integration.

For accessible labelling and validation, prefer using the `Field` component to wrap number fields. See the related example: [Number field](/ui/docs/components/field#number-field).

### Small Size [#small-size]

<ComponentPreview name="number-field-sm" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Large Size [#large-size]

<ComponentPreview name="number-field-lg" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Disabled [#disabled]

<ComponentPreview name="number-field-disabled" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With External Label [#with-external-label]

<ComponentPreview name="number-field-with-label" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Scrub [#with-scrub]

<ComponentPreview name="number-field-with-scrub" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Range [#with-range]

<ComponentPreview name="number-field-with-range" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Formatted Value [#with-formatted-value]

<ComponentPreview name="number-field-with-formatted-value" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Step [#with-step]

<ComponentPreview name="number-field-with-step" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Form Integration [#form-integration]

<ComponentPreview name="number-field-form" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />


# Pagination (/docs/components/pagination)



<ComponentPreview name="pagination-demo" />

## Overview [#overview]

Use Pagination when a long list is split into pages.

Pagination is useful for tables, search results, audit logs, directories, and other collections where showing every item at once would be slow or hard to scan.

## Anatomy [#anatomy]

Pagination usually includes previous and next controls, page links, the current page, and sometimes skipped ranges.

## Usage guidance [#usage-guidance]

Use pagination when pages are stable and users need direct access to specific positions. Use infinite loading only when browsing is more important than precise navigation.

## Accessibility [#accessibility]

Use clear labels for previous and next controls. Mark the current page so screen readers can identify it.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add pagination
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="pagination" title="components/ui/pagination.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
```

```tsx
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>
```


# Popover (/docs/components/popover)



<ComponentPreview name="popover-demo" />

## Overview [#overview]

Use Popover for contextual content that appears near a trigger.

Popovers are good for lightweight forms, explanations, filters, small pickers, and secondary controls. Use Dialog when the task needs focus trapping or a larger workflow.

## Anatomy [#anatomy]

A popover has a trigger, popup, optional title or description, content, and optional close action.

## Behavior [#behavior]

Keep popover content short and directly related to the trigger. Avoid putting complex multi-step workflows inside a popover.

## Accessibility [#accessibility]

The trigger should clearly describe what opens. Make sure focus behavior is predictable and that users can dismiss the popover with keyboard controls.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add popover
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="popover" title="components/ui/popover.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  Popover,
  PopoverClose,
  PopoverDescription,
  PopoverPopup,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"
```

```tsx
<Popover>
  <PopoverTrigger>Open Popover</PopoverTrigger>
  <PopoverPopup>
    <PopoverTitle>Popover Title</PopoverTitle>
    <PopoverDescription>Popover Description</PopoverDescription>
    <PopoverClose>Close</PopoverClose>
  </PopoverPopup>
</Popover>
```

## Examples [#examples]

The example shows a popover with an explicit close action.

### With Close Button [#with-close-button]

<ComponentPreview name="popover-with-close" />


# Preview Card (/docs/components/preview-card)



<ComponentPreview name="preview-card-demo" />

## Overview [#overview]

Use Preview Card to show a small preview when a user hovers or focuses a link.

Preview cards are useful for profiles, documents, issues, pages, and references where a quick summary helps users decide whether to open the link.

## Anatomy [#anatomy]

A preview card has a trigger link and popup content. The popup usually includes a title, short description, metadata, and sometimes media.

## Usage guidance [#usage-guidance]

Keep preview content brief. It should help users understand the destination, not replace the destination page.

## Accessibility [#accessibility]

The link must still work without the preview. Do not put essential actions only inside hover-only content.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add preview-card
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="preview-card" title="components/ui/preview-card.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import { Button } from "@/components/ui/button"
import {
  PreviewCard,
  PreviewCardPopup,
  PreviewCardTrigger,
} from "@/components/ui/preview-card"
```

```tsx
<PreviewCard>
  <PreviewCardTrigger>Open Preview Card</PreviewCardTrigger>
  <PreviewCardPopup>Preview Card Content</PreviewCardPopup>
</PreviewCard>
```


# Progress (/docs/components/progress)



<ComponentPreview name="progress-demo" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

## Overview [#overview]

Use Progress to show how far a task has advanced.

Progress is useful for uploads, imports, onboarding steps, generation, installation, and long-running actions. Use Meter for static values like quota or capacity.

## Anatomy [#anatomy]

A progress indicator has a value, maximum, optional label, optional formatted value, and visual bar.

## Behavior [#behavior]

Use determinate progress when you know the percentage. Use a separate loading pattern when the duration is unknown.

## Accessibility [#accessibility]

Show text when the value matters. Do not communicate progress only through animation or color.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add progress
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="progress" title="components/ui/progress.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"
```

```tsx
<Progress value={40} />
```

Note: If you render children inside `Progress`, you must also include `ProgressTrack` and `ProgressIndicator` inside it. Without them, the bar will not display. When no children are provided, a default track and indicator are rendered for you.

## Examples [#examples]

The examples show progress with labels and formatted values.

### With Label and Value [#with-label-and-value]

<ComponentPreview name="progress-with-label-value" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Formatted Value [#with-formatted-value]

<ComponentPreview name="progress-with-formatted-value" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />


# Radio Group (/docs/components/radio-group)



<ComponentPreview name="radio-group-demo" />

## Overview [#overview]

Use Radio Group when the user must choose one option from a set.

Radio groups are useful for plans, visibility, shipping speed, sort order, and settings where choices are mutually exclusive.

## Anatomy [#anatomy]

A radio group has a group label, radio items, item labels, optional descriptions, and selection state.

## Behavior [#behavior]

Show all important options when the list is short. Use Select when the list is long or when space is limited.

## Accessibility [#accessibility]

Group radio items with a clear label. Each item should have its own label, and keyboard users should be able to move through options with arrow keys.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add radio-group
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="radio-group" title="components/ui/radio-group.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import { Label } from "@/components/ui/label"
import { Radio, RadioGroup } from "@/components/ui/radio-group"
```

```tsx
<RadioGroup defaultValue="next">
  <Label>
    <Radio value="next" /> Next.js
  </Label>
  <Label>
    <Radio value="vite" /> Vite
  </Label>
  <Label>
    <Radio value="astro" /> Astro
  </Label>
</RadioGroup>
```

## Examples [#examples]

The examples show disabled, described, card-style, and form-connected radio groups.

For accessible labelling and validation, prefer using the `Field` component to wrap radio buttons. See the related example: [Radio Group field](/ui/docs/components/field#radio-group-field).

### Disabled [#disabled]

<ComponentPreview name="radio-group-disabled" />

### With Description [#with-description]

<ComponentPreview name="radio-group-with-description" />

### Card Style [#card-style]

<ComponentPreview name="radio-group-card" />

### Form Integration [#form-integration]

<ComponentPreview name="radio-group-form" />


# Scroll Area (/docs/components/scroll-area)



<ComponentPreview name="scroll-area-demo" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

## Overview [#overview]

Use Scroll Area when content needs its own scrollable region with custom scrollbars.

Scroll areas are useful for menus, sidebars, code panes, tables, activity feeds, and fixed-height panels.

## Anatomy [#anatomy]

A scroll area has a viewport, content, and optional horizontal or vertical scrollbars.

## Usage guidance [#usage-guidance]

Use scroll areas when the surrounding layout needs to stay fixed. Avoid hiding important content in a small scroll region when the page itself can scroll naturally.

## Accessibility [#accessibility]

Make sure keyboard and touch users can reach the content. Keep scrollable regions large enough to use comfortably.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add scroll-area
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="scroll-area" title="components/ui/scroll-area.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import { ScrollArea } from "@/components/ui/scroll-area"
```

```tsx
<ScrollArea className="h-64 rounded-md border">
  <div className="p-4">
    Just as suddenly as it had begun, the sensation stopped, leaving Alice
    feeling slightly disoriented. She looked around and realized that the room
    hadn't changed at all - it was she who had grown smaller, shrinking down to
    a fraction of her previous size. Alice felt herself growing larger and
    larger, filling up the entire room until she feared she might burst. The
    sensation was both thrilling and terrifying, as if she were expanding beyond
    the confines of her own body. She wondered if this was what it felt like to
    be a balloon, swelling with air until it could hold no more.
  </div>
</ScrollArea>
```

## Examples [#examples]

The examples show horizontal scrolling and combined horizontal and vertical scrolling.

### Horizontal Scroll [#horizontal-scroll]

<ComponentPreview name="scroll-area-horizontal" />

### Both Scrollbars [#both-scrollbars]

<ComponentPreview name="scroll-area-both" />


# Select (/docs/components/select)



<ComponentPreview name="select-demo" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

## Overview [#overview]

Use Select when users choose from a predefined list.

Select is best for known options such as status, role, country, visibility, sort order, and compact settings. Use Combobox when search is important.

## Anatomy [#anatomy]

A select has a trigger, value display, popup, items, optional groups, and selection state. Multiple selection is available when the user can choose more than one item.

## Behavior [#behavior]

Keep option labels short and unique. Use groups when a long list has meaningful categories.

## Accessibility [#accessibility]

Give the select a label and keep keyboard navigation intact. Users should be able to open, move, select, and close without a mouse.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add select
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="select" title="components/ui/select.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  Select,
  SelectItem,
  SelectPopup,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
```

```tsx
const items = [
  { label: "Select framework", value: null },
  { label: "Next.js", value: "next" },
  { label: "Vite", value: "vite" },
  { label: "Astro", value: "astro" },
]

<Select items={items}>
  <SelectTrigger>
    <SelectValue />
  </SelectTrigger>
  <SelectPopup>
    {items.map((item) => (
      <SelectItem key={item.value} value={item}>
        {item.label}
      </SelectItem>
    ))}
  </SelectPopup>
  </Select>
```

## Examples [#examples]

The examples show sizes, disabled state, alignment, groups, multiple selection, and form integration.

For accessible labelling and validation, prefer using the `Field` component to wrap selects. See the related example: [Select field](/ui/docs/components/field#select-field).

### Small Size [#small-size]

<ComponentPreview name="select-sm" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Large Size [#large-size]

<ComponentPreview name="select-lg" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Disabled [#disabled]

<ComponentPreview name="select-disabled" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Without Item Alignment [#without-item-alignment]

<ComponentPreview name="select-without-alignment" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Groups [#with-groups]

<ComponentPreview name="select-with-groups" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Multiple Selection [#multiple-selection]

<ComponentPreview name="select-multiple" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Form Integration [#form-integration]

<ComponentPreview name="select-form" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />


# Separator (/docs/components/separator)



<ComponentPreview name="separator-demo" />

## Overview [#overview]

Use Separator to divide related content or controls.

Separators are useful in menus, toolbars, cards, settings pages, and layouts where a visual break makes scanning easier.

## Anatomy [#anatomy]

A separator is a horizontal or vertical line. It can be decorative or semantic depending on how it is used.

## Usage guidance [#usage-guidance]

Use separators sparingly. Spacing and headings should do most of the grouping work. Add a separator when the visual boundary improves clarity.

## Accessibility [#accessibility]

If the separator communicates structure, keep it accessible. If it is only decorative, hide it from assistive technology.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add separator
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="separator" title="components/ui/separator.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import { Separator } from "@/components/ui/separator"
```

```tsx
<Separator />
```


# Sheet (/docs/components/sheet)



<ComponentPreview name="sheet-demo" />

## Overview [#overview]

Use Sheet for a panel that slides in from the edge of the screen.

Sheets are useful for details panels, filters, side navigation, quick edit forms, carts, and secondary workflows that should keep the current page visible.

## Anatomy [#anatomy]

A sheet has a trigger, content panel, header, title, description, body, footer, and close action. It is based on the dialog pattern.

## Behavior [#behavior]

Choose the side based on the workflow. Right-side sheets work well for details and editing. Left-side sheets work well for navigation. Bottom sheets can work well on smaller screens.

## Accessibility [#accessibility]

Provide a title, keep focus inside while open, and make sure focus returns to the trigger when closed.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add sheet
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="sheet" title="components/ui/sheet.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
```

```tsx
<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetPopup>
    <SheetHeader>
      <SheetTitle>Are you absolutely sure?</SheetTitle>
      <SheetDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </SheetDescription>
    </SheetHeader>
  </SheetPopup>
</Sheet>
```

## Examples [#examples]

The example shows sheet placement from different screen edges.

### Side sheets [#side-sheets]

<ComponentPreview name="sheet-position" />


# Skeleton (/docs/components/skeleton)



<ComponentPreview name="skeleton-demo" />

## Overview [#overview]

Use Skeleton to reserve space while content is loading.

Skeletons are useful for cards, tables, lists, avatars, charts, and forms where the layout is known before the data arrives.

## Anatomy [#anatomy]

A skeleton is a neutral placeholder shape. It should roughly match the size and rhythm of the content that will replace it.

## Usage guidance [#usage-guidance]

Use skeletons for short loading states where preserving layout helps. Avoid showing too many animated placeholders at once.

## Accessibility [#accessibility]

Do not announce every skeleton as content. Pair long loading states with clear loading text when users need to understand what is happening.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add skeleton
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="skeleton" title="components/ui/skeleton.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import { Skeleton } from "@/components/ui/skeleton"
```

```tsx
<Skeleton className="size-10 rounded-full" />
```

## Examples [#examples]

The examples show a composed loading layout and a standalone skeleton primitive.

### Skeleton Only [#skeleton-only]

<ComponentPreview name="skeleton-only" />


# Slider (/docs/components/slider)



<ComponentPreview name="slider-demo" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

## Overview [#overview]

Use Slider when users choose a value from a range.

Sliders are useful for volume, opacity, price range, thresholds, percentages, and settings where approximate adjustment is faster than typing.

## Anatomy [#anatomy]

A slider has a track, range, thumb, value, minimum, maximum, step, and optional label. Range sliders have more than one thumb.

## Behavior [#behavior]

Use a number field when exact numeric input is more important than quick adjustment. Use a slider when users benefit from seeing the range visually.

## Accessibility [#accessibility]

Provide a label and visible value when the number matters. Keep keyboard controls working for each thumb.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add slider
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="slider" title="components/ui/slider.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import { Slider, SliderValue } from "@/components/ui/slider"
```

```tsx
<Slider />
```

## Examples [#examples]

The examples show labeled values, range selection, vertical orientation, and form integration.

For accessible labelling and validation, prefer using the `Field` component to wrap checkboxes. See the related example: [Slider field](/ui/docs/components/field#slider-field).

### With Label and Value [#with-label-and-value]

<ComponentPreview name="slider-with-label-value" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Range Slider [#range-slider]

<ComponentPreview name="slider-range" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Vertical [#vertical]

<ComponentPreview name="slider-vertical" />

### Form Integration [#form-integration]

<ComponentPreview name="slider-form" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />


# Switch (/docs/components/switch)



<ComponentPreview name="switch-demo" />

## Overview [#overview]

Use Switch for an on/off setting that takes effect immediately or changes a persistent preference.

Switches are useful for feature settings, notifications, privacy choices, and simple enabled or disabled states. Use Checkbox when the option is part of a form submission or a list of independent choices.

## Anatomy [#anatomy]

A switch has a track, thumb, label, optional description, and checked state.

## Behavior [#behavior]

Use clear labels that describe the enabled state. Avoid labels like `On` or `Enable` without context.

## Accessibility [#accessibility]

Connect the switch to a label. If changing the switch has a delayed effect, show feedback so users know the update worked.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add switch
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="switch" title="components/ui/switch.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import { Switch } from "@/components/ui/switch"
```

```tsx
<Switch />
```

## Examples [#examples]

The examples show disabled, described, card-style, and form-connected switches.

For accessible labelling and validation, prefer using the `Field` component to wrap checkboxes. See the related example: [Switch field](/ui/docs/components/field#switch-field).

### Disabled [#disabled]

<ComponentPreview name="switch-disabled" />

### With Description [#with-description]

<ComponentPreview name="switch-with-description" />

### Card Style [#card-style]

<ComponentPreview name="switch-card" />

### Form Integration [#form-integration]

<ComponentPreview name="switch-form" />


# Table (/docs/components/table)



<ComponentPreview name="table-demo" />

## Overview [#overview]

Use Table for structured data arranged in rows and columns.

Tables are useful for invoices, users, orders, logs, permissions, metrics, and any data where users compare values across rows.

## Anatomy [#anatomy]

A table has a caption or surrounding heading, header rows, body rows, cells, and optional footer. Headers should describe the data in each column.

## Usage guidance [#usage-guidance]

Use tables for comparison. Use cards or lists when each item has varied content and users do not need column alignment.

## Accessibility [#accessibility]

Use table headers correctly so screen readers can understand row and column relationships. Keep action buttons inside rows clearly labeled.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add table
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="table" title="components/ui/table.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
```

```tsx
<Table>
  <TableCaption>Caption</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Header</TableHead>
      <TableHead>Header</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Cell</TableCell>
      <TableCell>Cell</TableCell>
    </TableRow>
  </TableBody>
</Table>
```

## Examples [#examples]

The examples show a basic table and a framed table surface.

### Framed Table [#framed-table]

<ComponentPreview name="table-framed" />


# Tabs (/docs/components/tabs)



<ComponentPreview name="tabs-demo" />

## Overview [#overview]

Use Tabs to switch between related panels without leaving the current page.

Tabs are useful for settings sections, profile views, code examples, billing panels, and compact content groups. The panels should be peers, not steps in a process.

## Anatomy [#anatomy]

Tabs include a root, list, triggers, and content panels. Each trigger controls one panel.

## Behavior [#behavior]

Use horizontal tabs for most layouts. Use vertical tabs when labels are longer or when the tab list acts like a side navigation within a page.

## Accessibility [#accessibility]

Keep tab labels short and unique. Keyboard users should be able to move through tabs and reach the active panel.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add tabs
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="tabs" title="components/ui/tabs.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs"
```

```tsx
<Tabs defaultValue="tab-1">
  <TabsList>
    <TabsTab value="tab-1">Tab 1</TabsTab>
    <TabsTab value="tab-2">Tab 2</TabsTab>
    <TabsTab value="tab-3">Tab 3</TabsTab>
  </TabsList>
  <TabsPanel value="tab-1">Tab 1 content</TabsPanel>
  <TabsPanel value="tab-2">Tab 2 content</TabsPanel>
  <TabsPanel value="tab-3">Tab 3 content</TabsPanel>
</Tabs>
```

## Examples [#examples]

The examples show default tabs, underline styling, vertical orientation, and vertical underline styling.

### Underline Variant [#underline-variant]

<ComponentPreview name="tabs-underline" />

### Vertical Orientation [#vertical-orientation]

<ComponentPreview name="tabs-vertical" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-80" />

### Underline with Vertical Orientation [#underline-with-vertical-orientation]

<ComponentPreview name="tabs-underline-vertical" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-80" />


# Textarea (/docs/components/textarea)



<ComponentPreview name="textarea-demo" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

## Overview [#overview]

Use Textarea for multi-line text.

Textareas are useful for comments, descriptions, notes, feedback, support messages, and any field where the answer may be longer than one line.

## Anatomy [#anatomy]

A textarea has a value, placeholder, size, disabled state, and optional validation state. It should usually be wrapped in Field.

## Usage guidance [#usage-guidance]

Use Input for short single-line values. Use Textarea when users need space to write. Set a sensible minimum height so the field does not feel cramped.

## Accessibility [#accessibility]

Always provide a label. Add helper text when users need to know expected length, format, or privacy context.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add textarea
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="textarea" title="components/ui/textarea.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import { Textarea } from "@/components/ui/textarea"
```

```tsx
<Textarea />
```

## Examples [#examples]

The examples show sizes, disabled state, labels, and form integration.

For accessible labelling and validation, prefer using the `Field` component to wrap textareas. See the related example: [Textarea field](/ui/docs/components/field#textarea-field).

### Small Size [#small-size]

<ComponentPreview name="textarea-sm" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Large Size [#large-size]

<ComponentPreview name="textarea-lg" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Disabled [#disabled]

<ComponentPreview name="textarea-disabled" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Label [#with-label]

<ComponentPreview name="textarea-with-label" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Form Integration [#form-integration]

<ComponentPreview name="textarea-form" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />


# Toast (/docs/components/toast)



<ComponentPreview name="toast-demo" />

## Overview [#overview]

Use Toast for short feedback that appears after an action.

Toasts are useful for saves, copies, uploads, background tasks, and lightweight errors. They should not contain information the user must act on later.

LoveUI includes two toast styles:

* **Toast:** a standard, quiet notification built on Base UI.
* **Gooey Toast:** an animated notification with morphing transitions and more expressive motion.

## Anatomy [#anatomy]

A toast has a title or message, optional description, status, optional action, and duration. A provider or toaster renders the stack of active toasts.

## Behavior [#behavior]

Use status to match the result. Use promise helpers when an async action has loading, success, and error states.

Use the standard Toast when the interface should feel calm and utilitarian. Use Gooey Toast when the notification is part of a more animated product moment, such as uploads, saves, confirmations, and async progress.

## Accessibility [#accessibility]

Keep messages short and clear. Important errors should also appear near the affected form or content, not only in a toast.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add toast
    ```

    <Step>
      Add the 

      `ToastProvider`

       to your app.
    </Step>

    <span data-lib="base-ui">
      ```tsx title="app/layout.tsx"
      // [!code word:import { ToastProvider } from "@/components/ui/toast"]
      // [!code word:<ToastProvider>]
      // [!code word:</ToastProvider>]
      import { ToastProvider } from "@/components/ui/toast"

      export default function RootLayout({ children }) {
        return (
          <html lang="en">
            <head />
            <body>
              <ToastProvider>
                <main>{children}</main>
              </ToastProvider>
            </body>
          </html>
        )
      }
      ```
    </span>
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="toast" title="components/ui/toast.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>

      <Step>
        Add the 

        `ToastProvider`

         to your app.
      </Step>

      <span data-lib="base-ui">
        ```tsx title="app/layout.tsx"
        // [!code word:import { ToastProvider } from "@/rcomponents/ui/toast"]
        // [!code word:<ToastProvider>]
        // [!code word:</ToastProvider>]
        import { ToastProvider } from "@/components/ui/toast"

        export default function RootLayout({ children }) {
          return (
            <html lang="en">
              <head />
              <body>
                <ToastProvider>
                  <main>{children}</main>
                </ToastProvider>
              </body>
            </html>
          )
        }
        ```
      </span>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import { toastManager } from "@/components/ui/toast"
```

```tsx
toastManager.add({
  title: "Event has been created",
  description: "Monday, January 3rd at 6:00pm",
})
```

By default, toasts appear in the **bottom-right** corner. You can change this by setting the `position` prop on the `ToastProvider`.

Allowed values: `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`. For example:

```tsx
<ToastProvider position="top-center">{children}</ToastProvider>
```

Use the `variant` option to show the animated gooey variation from the same toast API:

```tsx
toastManager.add({
  variant: "gooey",
  title: "Event has been created",
  description: "Monday, January 3rd at 6:00pm",
})
```

You can combine `variant: "gooey"` with status types, actions, position, duration, and promise helpers.

```tsx
toastManager.add({
  variant: "gooey",
  type: "success",
  title: "Saved",
  description: "Your changes are live.",
  position: "top-right",
})
```

## Standard Toast Examples [#standard-toast-examples]

The examples show status, loading, actions, promise state, and varied toast heights.

### With Status [#with-status]

<ComponentPreview name="toast-with-status" />

### Loading [#loading]

<ComponentPreview name="toast-loading" />

### With Action [#with-action]

<ComponentPreview name="toast-with-action" />

### Promise [#promise]

<ComponentPreview name="toast-promise" />

### With Varying Heights [#with-varying-heights]

<ComponentPreview name="toast-heights" />

## Gooey Toast Usage [#gooey-toast-usage]

Gooey Toast is a variation of the Toast component. You do not install or render a separate provider.

By default, standard toasts appear in the **bottom-right** corner. Gooey toasts appear in the **top-right** corner unless you pass a `position` option.

Allowed values: `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`.

```tsx
toastManager.add({
  variant: "gooey",
  position: "bottom-center",
  title: "Synced",
  description: "All records are up to date.",
})
```

## Gooey Toast Examples [#gooey-toast-examples]

These examples show the animated toast style, state variants, promise handling, action buttons, and placement.

### Basic Gooey Toast [#basic-gooey-toast]

<ComponentPreview name="gooey-toast-demo" />

### Gooey States [#gooey-states]

Gooey Toast supports success, error, warning, info, and action states.

<ComponentPreview name="gooey-toast-states" />

### Gooey Promise [#gooey-promise]

Drive gooey toast states from promises for async operations.

<ComponentPreview name="gooey-toast-promise" />

### Gooey With Action Button [#gooey-with-action-button]

Add an interactive button to a gooey toast.

<ComponentPreview name="gooey-toast-with-button" />

### Gooey Position [#gooey-position]

Control where gooey toasts appear on the screen.

<ComponentPreview name="gooey-toast-position" />

## Gooey Toast API Reference [#gooey-toast-api-reference]

### `toastManager.add` [#toastmanageradd]

The same `toastManager.add` method shows both standard and gooey toasts.

Use no variant for a standard toast:

```tsx
toastManager.add({
  title: "Saved",
  description: "Your changes are live.",
})
```

Use `variant: "gooey"` for the animated variation:

```tsx
toastManager.add({
  variant: "gooey",
  type: "success",
  title: "Saved",
  description: "Your changes are live.",
})
```

### Gooey Options [#gooey-options]

```typescript
interface GooeyOptions {
  variant?: "gooey"
  title?: string
  description?: ReactNode | string
  position?: GooeyPosition
  duration?: number | null
  icon?: ReactNode | null
  styles?: GooeyStyles
  fill?: string
  roundness?: number
  autopilot?: boolean | { expand?: number; collapse?: number }
  button?: {
    title: string
    onClick: () => void
  }
}
```

### Toast Provider Props [#toast-provider-props]

```typescript
interface ToastProviderProps {
  position?: ToastPosition // Standard toast position
  gooeyPosition?: ToastPosition // Default position for gooey toasts
  gooeyOptions?: Partial<GooeyOptions>
}
```


# Toggle (/docs/components/toggle)



<ComponentPreview name="toggle-demo" />

## Overview [#overview]

Use Toggle for a button that can be pressed or not pressed.

Toggle is useful for formatting buttons, favorite buttons, compact filters, view options, and controls where the pressed state matters.

Use Toggle Group when several toggles belong to the same control. A group can behave like one shared choice, or it can allow several toggles to be pressed at the same time.

## Anatomy [#anatomy]

A single toggle has a button, label or icon, pressed state, variant, size, and disabled state.

A toggle group has a wrapper, toggle items, optional separators, shared variant and size values, and a shared pressed state model.

## Behavior [#behavior]

Use Toggle when the pressed state is visible and meaningful. Use Switch for settings that read as on or off.

Use a single-selection group when the choices are mutually exclusive. Use a multiple-selection group when each toggle can be changed independently but the controls should still look related.

## Accessibility [#accessibility]

Icon-only toggles need accessible names. Make the pressed state visible through more than color when possible.

Each item in a group also needs a clear accessible name. Tooltips can explain icon-only controls, but the toggle should still have an `aria-label`.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add toggle
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="toggle" title="components/ui/toggle.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import { Toggle, ToggleGroup } from "@/components/ui/toggle"
```

```tsx
<Toggle>Toggle</Toggle>
```

```tsx
<ToggleGroup defaultValue={["bold"]}>
  <Toggle value="bold" aria-label="Toggle bold">
    Bold
  </Toggle>
  <Toggle value="italic" aria-label="Toggle italic">
    Italic
  </Toggle>
  <Toggle value="underline" aria-label="Toggle underline">
    Underline
  </Toggle>
</ToggleGroup>
```

## Examples [#examples]

The examples show standalone toggles first, then grouped toggles with shared styles and state.

### Outline [#outline]

<ComponentPreview name="toggle-outline" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### With Icon [#with-icon]

<ComponentPreview name="toggle-with-icon" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Small Size [#small-size]

<ComponentPreview name="toggle-sm" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Large Size [#large-size]

<ComponentPreview name="toggle-lg" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Disabled [#disabled]

<ComponentPreview name="toggle-disabled" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

### Icon Group [#icon-group]

<ComponentPreview name="toggle-icon-group" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

## Toggle Group [#toggle-group]

Toggle Group is included in the same component file. Use it when related toggles should sit together and share the same size, variant, and state model.

The group passes its `variant` and `size` values to the toggles inside it, so the grouped control stays visually consistent.

### Basic Group [#basic-group]

<ComponentPreview name="toggle-group-demo" />

### Small Toggles [#small-toggles]

<ComponentPreview name="toggle-group-sm" />

### Large Toggles [#large-toggles]

<ComponentPreview name="toggle-group-lg" />

### Outline Toggles [#outline-toggles]

<ComponentPreview name="toggle-group-outline" />

### Outline Toggles With Separators [#outline-toggles-with-separators]

<ComponentPreview name="toggle-group-outline-with-separator" />

### Disabled Group [#disabled-group]

<ComponentPreview name="toggle-group-disabled" />

### Disabled Item [#disabled-item]

<ComponentPreview name="toggle-group-with-disabled-item" />

### Multiple Selection [#multiple-selection]

<ComponentPreview name="toggle-group-multiple" />

### With Tooltips [#with-tooltips]

<ComponentPreview name="tooltip-grouped" />


# Toolbar (/docs/components/toolbar)



<ComponentPreview name="toolbar-demo" />

## Overview [#overview]

Use Toolbar to group controls that act on the same surface.

Toolbars are useful in editors, tables, canvases, filters, and dashboards where several commands belong together.

## Anatomy [#anatomy]

A toolbar can contain buttons, toggles, toggle groups, separators, menus, and other compact controls.

## Usage guidance [#usage-guidance]

Keep the most common actions visible. Move less common actions into a menu when the toolbar becomes crowded.

## Accessibility [#accessibility]

Controls inside the toolbar still need labels and keyboard support. Keep focus order predictable.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add toolbar
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="toolbar" title="components/ui/toolbar.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import { Button } from "@/registry/default/ui/button"
import { Toggle } from "@/registry/default/ui/toggle"
import {
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
  ToolbarSeparator,
} from "@/registry/default/ui/toolbar"
```

```tsx
<Toolbar>
  <ToolbarGroup>
    <ToolbarButton render={<Toggle />}>Bold</ToolbarButton>
    <ToolbarButton render={<Toggle />}>Underline</ToolbarButton>
  </ToolbarGroup>
  <ToolbarSeparator />
  <ToolbarButton render={<Button />}>Save</ToolbarButton>
</Toolbar>
```


# Tooltip (/docs/components/tooltip)



<ComponentPreview name="tooltip-demo" />

## Overview [#overview]

Use Tooltip to provide a short hint for an element.

Tooltips are useful for icon-only buttons, truncated labels, unfamiliar controls, and brief extra context. Do not use tooltips for information that is required to complete a task.

## Anatomy [#anatomy]

A tooltip has a trigger and popup content. The content should be short, usually one sentence or phrase.

## Behavior [#behavior]

Tooltips appear on hover or focus. They should not contain interactive controls because users may not be able to reach them reliably.

## Accessibility [#accessibility]

The trigger should make sense without the tooltip when possible. For icon-only controls, also provide an accessible name.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add tooltip
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="tooltip" title="components/ui/tooltip.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  Tooltip,
  TooltipPopup,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"
```

```tsx
<Tooltip>
  <TooltipTrigger render={<Button variant="outline" />}>
    Hover me
  </TooltipTrigger>
  <TooltipPopup>Helpful hint</TooltipPopup>
</Tooltip>
```

**Grouping Tooltips**

To group multiple tooltips so they appear instantly after the first one is opened, wrap them in `TooltipProvider`. The grouping logic ensures that once a tooltip becomes visible, the adjacent tooltips will be shown instantly.

```tsx
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<Button variant="outline" />}>
      Tooltip 1
    </TooltipTrigger>
    <TooltipPopup>Content 1</TooltipPopup>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger render={<Button variant="outline" />}>
      Tooltip 2
    </TooltipTrigger>
    <TooltipPopup>Content 2</TooltipPopup>
  </Tooltip>
</TooltipProvider>
```

## Examples [#examples]

The example shows grouped tooltips for related controls.

### Grouped Tooltips [#grouped-tooltips]

<ComponentPreview name="tooltip-grouped" />