# loveui

**loveui** is a collection of beautifully designed, accessible, and composable components for your React apps. Built on top of [Base UI](https://base-ui.com/) and styled with [Tailwind CSS](https://tailwindcss.com/), it is designed for you to copy, paste, and own.

## Overview

- [Introduction](https://ui.loveui.dev/ui/docs/index.md): What LoveUI is and why it matters.
- [Get Started](https://ui.loveui.dev/ui/docs/get-started.md): Ship your first LoveUI screen in minutes.
- [Styling](https://ui.loveui.dev/ui/docs/styling.md): A guide to styling components with our color system.

## Components

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

## Features

- [Avatar Stack](https://ui.loveui.dev/ui/docs/features/avatar-stack.md): Avatar Stack is a component that allows you to stack and overlap avatars.
- [Cursor](https://ui.loveui.dev/ui/docs/features/cursor.md): A cursor component, great for realtime interactive applications.
- [Calendar](https://ui.loveui.dev/ui/docs/features/calendar.md): The calendar view displays features on a grid calendar. Specifically it shows the end date of each feature, and groups features by day.
- [Mini Calendar](https://ui.loveui.dev/ui/docs/features/mini-calendar.md): A composable mini calendar component for picking dates close to today.
- [Gantt](https://ui.loveui.dev/ui/docs/features/gantt.md): The Gantt chart is a powerful tool for visualizing project schedules and tracking the progress of tasks. It provides a clear, hierarchical view of tasks, allowing you to easily identify manage project timelines.
- [Kanban](https://ui.loveui.dev/ui/docs/features/kanban.md): A kanban board is a visual tool that helps you manage and visualize your work. It is a board with columns, and each column represents a status, e.g. "Backlog", "In Progress", "Done".
- [List](https://ui.loveui.dev/ui/docs/features/list.md): List views are a great way to show a list of tasks grouped by status and ranked by priority.
- [Table](https://ui.loveui.dev/ui/docs/features/table.md): Table views are used to display data in a tabular format. They are useful for displaying large amounts of data in a structured way.
- [Status](https://ui.loveui.dev/ui/docs/features/status.md): Status components are used to display the uptime of a service.
- [Relative Time](https://ui.loveui.dev/ui/docs/features/relative-time.md): A component that displays time in various timezones.
- [Tree](https://ui.loveui.dev/ui/docs/features/tree.md): A composable tree component with animated expand/collapse and customizable nodes for displaying hierarchical data structures.
- [Comparison](https://ui.loveui.dev/ui/docs/features/comparison.md): A slider-based component for comparing two items in an overlay.
- [Contribution Graph](https://ui.loveui.dev/ui/docs/features/contribution-graph.md): A GitHub-style contribution graph component that displays activity levels over time.
- [Editor](https://ui.loveui.dev/ui/docs/features/editor.md): The Editor component is a powerful and flexible text editor that allows you to create and edit rich text content.
- [Sandbox](https://ui.loveui.dev/ui/docs/features/sandbox.md): The sandbox component allows you to preview and test components in a sandboxed environment.
- [Snippet](https://ui.loveui.dev/ui/docs/features/snippet.md): Snippet is a component that allows you to display and copy code in a tabbed interface.
- [Choicebox](https://ui.loveui.dev/ui/docs/features/choicebox.md): Choiceboxes are a great way to show radio or checkbox options with a card style.
- [Combobox](https://ui.loveui.dev/ui/docs/features/combobox.md): Autocomplete input and command palette with a list of suggestions.
- [Dropzone](https://ui.loveui.dev/ui/docs/features/dropzone.md): Allows users to drag-and-drop files into a container to upload or process them.
- [Pill](https://ui.loveui.dev/ui/docs/features/pill.md): A flexible badge component designed for a variety of use cases.
- [Rating](https://ui.loveui.dev/ui/docs/features/rating.md): A star rating component with keyboard navigation and hover effects.
- [Tags](https://ui.loveui.dev/ui/docs/features/tags.md): Tags are a way to apply multiple labels to an item.
- [Image Crop](https://ui.loveui.dev/ui/docs/features/image-crop.md): A component that allows users to crop images with customizable aspect ratios and circular cropping options.
- [Image Zoom](https://ui.loveui.dev/ui/docs/features/image-zoom.md): Image zoom is a component that allows you to zoom in on an image.
- [Glimpse](https://ui.loveui.dev/ui/docs/features/glimpse.md): A component that shows a preview of a URL when hovering over a link.
- [Credit Card](https://ui.loveui.dev/ui/docs/features/credit-card.md): Credit card components for displaying and validating credit card information.
- [Ticker](https://ui.loveui.dev/ui/docs/features/ticker.md): A composable finance ticker for displaying symbols, prices and changes.
- [Deck](https://ui.loveui.dev/ui/docs/features/deck.md): A Tinder-like swipeable card stack component with smooth animations.
- [Stories](https://ui.loveui.dev/ui/docs/features/stories.md): A carousel of friends' stories, in video, image or avatar format.
- [Reel](https://ui.loveui.dev/ui/docs/features/reel.md): A composable, Instagram-style Reel component with progress indicators and navigation controls.
- [Video Player](https://ui.loveui.dev/ui/docs/features/video-player.md): A composable, shadcn/ui styled video player component that uses the media-chrome library.
- [Announcement](https://ui.loveui.dev/ui/docs/features/announcement.md): A compound badge designed to display an announcement.
- [Banner](https://ui.loveui.dev/ui/docs/features/banner.md): A banner is a full-width component that can be used to show a message and action to the user.
- [Dialog Stack](https://ui.loveui.dev/ui/docs/features/dialog-stack.md): Composable stacked dialogs, useful for creating a wizard, nested form or multi-step process. It provides a consistent layout and styling for each dialog, and includes navigation components to move between them.
- [Marquee](https://ui.loveui.dev/ui/docs/features/marquee.md): Marquees are a great way to show a list of items in a horizontal scrolling motion.
- [Color Picker](https://ui.loveui.dev/ui/docs/features/color-picker.md): Allows users to select a color. Modeled after the color picker in Figma.
- [Theme Switcher](https://ui.loveui.dev/ui/docs/features/theme-switcher.md): A component to switch between light, dark and system theme.
- [Typography](https://ui.loveui.dev/ui/docs/features/typography.md): A component for applying consistent typography styles across your application.
- [QR Code](https://ui.loveui.dev/ui/docs/features/qr-code.md): QR Code is a component that generates a QR code from a string.
- [Spinner](https://ui.loveui.dev/ui/docs/features/spinner.md): The Spinner component expands the shadcn spinner component with additional variants.
- [AI Elements](https://ai-sdk.dev/elements/components)
- [React Wheel Picker](https://react-wheel-picker.chanhdai.com/)

## Backgrounds

- [Ether](https://ui.loveui.dev/ui/docs/backgrounds/ether.md): An atmospheric background with fluid light ripples rendered in Three.js.
- [Gradient Blinds](https://ui.loveui.dev/ui/docs/backgrounds/gradient-blinds.md): An animated gradient blinds background built with OGL WebGL.
- [Gradient Mesh](https://ui.loveui.dev/ui/docs/backgrounds/gradient-mesh.md): Animated gradient mesh background with water effects and color blending powered by OGL WebGL library.
- [Shader Ripple](https://ui.loveui.dev/ui/docs/backgrounds/shader-ripple.md): Animated ripple background with customizable colors and effects powered by Three.js shaders.
- [Silk](https://ui.loveui.dev/ui/docs/backgrounds/silk.md): A smooth, flowing background built with React Three Fiber.

## Resources

- [LoveUI MCP Server](https://ui.loveui.dev/ui/docs/resources/loveui-mcp-server.md): Serve every LoveUI registry definition through the Model Context Protocol.
- [LoveUI Skills](https://ui.loveui.dev/ui/docs/resources/loveui-skills.md): Production-focused agent skill instructions for building polished LoveUI interfaces.
- [llms.txt](https://ui.loveui.dev/llms.txt)