# HareUI

> HareUI is a Vue 3 port of HeroUI v3: beautiful, fast and modern UI components built on Reka UI, Tailwind CSS v4 and tailwind-variants, with Nuxt UI-style slots, a `ui` prop for per-element classes and app-level theme overrides.

## Getting Started

- [Introduction](https://hareui.alexzvn.me/docs/getting-started/): A Vue 3 port of HeroUI v3, built on Reka UI and Tailwind CSS v4 with a Nuxt UI-style component API.
- [Quick Start](https://hareui.alexzvn.me/docs/getting-started/quick-start): Install HareUI and render your first Button in minutes.
- [Design Principles](https://hareui.alexzvn.me/docs/getting-started/design-principles): Core principles that guide HareUI's design and API.
- [Frameworks](https://hareui.alexzvn.me/docs/getting-started/frameworks): Integrate HareUI with Vite, Nuxt, and other Vue-based tooling.
- [Colors](https://hareui.alexzvn.me/docs/getting-started/colors): Semantic color tokens and CSS variables that power HareUI's design system.
- [Theming](https://hareui.alexzvn.me/docs/getting-started/theming): Customize HareUI's design system with CSS variables and app-level theme overrides.
- [Dark Mode](https://hareui.alexzvn.me/docs/getting-started/dark-mode): Add light, dark, and system theme switching to HareUI.
- [Styling](https://hareui.alexzvn.me/docs/getting-started/styling): Style HareUI components with the class prop, the ui prop, and data attribute selectors.
- [Animation](https://hareui.alexzvn.me/docs/getting-started/animation): Add smooth animations and transitions to HareUI components.
- [Composition](https://hareui.alexzvn.me/docs/getting-started/composition): Build flexible UI with named slots, scoped slot props, and the as prop.
- [LLMs.txt](https://hareui.alexzvn.me/docs/getting-started/llms-txt): Enable AI coding assistants to understand HareUI's API with llms.txt and llms-full.txt.

## Components

- [All Components (Vue)](https://hareui.alexzvn.me/docs/components/): Explore the full list of components available in the library. More are on the way.
- [Accordion](https://hareui.alexzvn.me/docs/components/accordion): A collapsible content panel for organizing information in a compact space
- [Alert](https://hareui.alexzvn.me/docs/components/alert): Display important messages and notifications to users with status indicators
- [AlertDialog](https://hareui.alexzvn.me/docs/components/alert-dialog): Modal dialog for critical confirmations requiring user attention and explicit action
- [Autocomplete](https://hareui.alexzvn.me/docs/components/autocomplete): An autocomplete combines a select with filtering, allowing users to search and select from a list of options
- [Avatar](https://hareui.alexzvn.me/docs/components/avatar): Display user profile images with customizable fallback content
- [AvatarGroup](https://hareui.alexzvn.me/docs/components/avatar-group): Display a stacked or grid group of avatars with overflow counting
- [Badge](https://hareui.alexzvn.me/docs/components/badge): Displays a small indicator positioned relative to another element, commonly used for notification counts, status dots, and labels
- [Breadcrumbs](https://hareui.alexzvn.me/docs/components/breadcrumbs): Navigation breadcrumbs showing the current page's location within a hierarchy
- [Button](https://hareui.alexzvn.me/docs/components/button): A clickable button component with multiple variants and states
- [ButtonGroup](https://hareui.alexzvn.me/docs/components/button-group): Group related buttons together with consistent styling and spacing
- [Calendar](https://hareui.alexzvn.me/docs/components/calendar): Date picker with month grid, navigation, and year picker support built on Reka UI's Calendar.
- [Card](https://hareui.alexzvn.me/docs/components/card): Flexible container component for grouping related content and actions
- [Checkbox](https://hareui.alexzvn.me/docs/components/checkbox): Checkboxes allow users to select multiple items from a list, or mark one individual item as selected.
- [CheckboxGroup](https://hareui.alexzvn.me/docs/components/checkbox-group): A checkbox group component for managing multiple checkbox selections
- [Chip](https://hareui.alexzvn.me/docs/components/chip): Small informational badges for displaying labels, statuses, and categories
- [CloseButton](https://hareui.alexzvn.me/docs/components/close-button): Button component for closing dialogs, modals, or dismissing content
- [ColorArea](https://hareui.alexzvn.me/docs/components/color-area): A 2D color picker that allows users to select colors from a gradient area
- [ColorField](https://hareui.alexzvn.me/docs/components/color-field): Color input field with labels, descriptions, and validation
- [ColorPicker](https://hareui.alexzvn.me/docs/components/color-picker): A composable color picker that synchronizes color value between multiple color components
- [ColorSlider](https://hareui.alexzvn.me/docs/components/color-slider): A color slider allows users to adjust an individual channel of a color value
- [ColorSwatch](https://hareui.alexzvn.me/docs/components/color-swatch): A visual preview of a color value with accessibility support
- [ColorSwatchPicker](https://hareui.alexzvn.me/docs/components/color-swatch-picker): A list of color swatches that allows users to select a color from a predefined palette.
- [ComboBox](https://hareui.alexzvn.me/docs/components/combo-box): A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query
- [DateField](https://hareui.alexzvn.me/docs/components/date-field): Date input field with labels, descriptions, and validation
- [DatePicker](https://hareui.alexzvn.me/docs/components/date-picker): Combines a DateField and a Calendar in a popover for picking a date
- [DateRangePicker](https://hareui.alexzvn.me/docs/components/date-range-picker): Combines start and end date fields and a RangeCalendar in a popover for picking a date range
- [Description](https://hareui.alexzvn.me/docs/components/description): Provides supplementary text for form fields and other components
- [Disclosure](https://hareui.alexzvn.me/docs/components/disclosure): A disclosure is a collapsible section with a header containing a heading and a trigger button, and a panel that wraps the content.
- [DisclosureGroup](https://hareui.alexzvn.me/docs/components/disclosure-group): Container that manages multiple Disclosure items with coordinated expanded states
- [Drawer](https://hareui.alexzvn.me/docs/components/drawer): Slide-out panel for supplementary content and actions
- [Dropdown](https://hareui.alexzvn.me/docs/components/dropdown): A dropdown displays a list of actions or options that a user can choose
- [FieldError](https://hareui.alexzvn.me/docs/components/field-error): Displays validation error messages for form fields
- [Fieldset](https://hareui.alexzvn.me/docs/components/fieldset): Group related form controls with legends, descriptions, and actions
- [Form](https://hareui.alexzvn.me/docs/components/form): Wrapper component for form validation and submission handling
- [Input](https://hareui.alexzvn.me/docs/components/input): Primitive single-line text input component that accepts standard HTML attributes
- [InputGroup](https://hareui.alexzvn.me/docs/components/input-group): Group related input controls with prefix and suffix elements for enhanced form fields
- [InputOtp](https://hareui.alexzvn.me/docs/components/input-otp): A one-time password input for verification codes and secure authentication
- [Kbd](https://hareui.alexzvn.me/docs/components/kbd): Display keyboard shortcuts and key combinations
- [Label](https://hareui.alexzvn.me/docs/components/label): Renders an accessible label associated with form controls
- [Link](https://hareui.alexzvn.me/docs/components/link): A styled anchor component for navigation with built-in icon support
- [ListBox](https://hareui.alexzvn.me/docs/components/list-box): A listbox displays a list of options and allows a user to select one or more of them
- [Meter](https://hareui.alexzvn.me/docs/components/meter): A meter represents a quantity within a known range, or a fractional value.
- [Modal](https://hareui.alexzvn.me/docs/components/modal): Dialog overlay for focused user interactions and important content
- [NumberField](https://hareui.alexzvn.me/docs/components/number-field): Number input fields with increment/decrement buttons, validation, and internationalized formatting
- [Pagination](https://hareui.alexzvn.me/docs/components/pagination): Page navigation with composable page links, previous/next buttons, and ellipsis indicators
- [Popover](https://hareui.alexzvn.me/docs/components/popover): Displays rich content in a portal, anchored to a trigger element
- [ProgressBar](https://hareui.alexzvn.me/docs/components/progress-bar): A progress bar shows either determinate or indeterminate progress of an operation over time.
- [ProgressCircle](https://hareui.alexzvn.me/docs/components/progress-circle): A circular progress indicator that shows determinate or indeterminate progress.
- [RadioGroup](https://hareui.alexzvn.me/docs/components/radio-group): Radio group for selecting a single option from a list
- [RangeCalendar](https://hareui.alexzvn.me/docs/components/range-calendar): Date range picker with month grid, navigation, and year picker support built on Reka UI's RangeCalendar.
- [ScrollShadow](https://hareui.alexzvn.me/docs/components/scroll-shadow): Apply visual shadows to indicate scrollable content overflow with automatic detection of scroll position.
- [SearchField](https://hareui.alexzvn.me/docs/components/search-field): A text field for search queries, with a search icon and a clear button
- [Select](https://hareui.alexzvn.me/docs/components/select): A select displays a collapsible list of options and allows a user to select one or more of them
- [Separator](https://hareui.alexzvn.me/docs/components/separator): Visually divide content sections
- [Skeleton](https://hareui.alexzvn.me/docs/components/skeleton): Skeleton is a placeholder to show a loading state and the expected shape of a component.
- [Slider](https://hareui.alexzvn.me/docs/components/slider): A slider allows a user to select one or more values within a range
- [Spinner](https://hareui.alexzvn.me/docs/components/spinner): A loading indicator component to show pending states
- [Surface](https://hareui.alexzvn.me/docs/components/surface): Container component that provides surface-level styling and context for child components
- [Switch](https://hareui.alexzvn.me/docs/components/switch): A toggle switch component for boolean states
- [Table](https://hareui.alexzvn.me/docs/components/table): Tables display structured data in rows and columns with support for sorting, selection, column resizing, and infinite scrolling.
- [Tabs](https://hareui.alexzvn.me/docs/components/tabs): Tabs organize content into multiple sections and allow users to navigate between them.
- [Tag Group](https://hareui.alexzvn.me/docs/components/tag-group): A focusable list of tags with support for selection and removal
- [TextArea](https://hareui.alexzvn.me/docs/components/text-area): Primitive multiline text input component that accepts standard HTML attributes
- [TextField](https://hareui.alexzvn.me/docs/components/text-field): Composition-friendly text fields with labels, descriptions, and inline validation
- [TimeField](https://hareui.alexzvn.me/docs/components/time-field): Time input field with labels, descriptions, and validation
- [Toast](https://hareui.alexzvn.me/docs/components/toast): Display temporary notifications and messages to users with automatic dismissal and customizable placement
- [ToggleButton](https://hareui.alexzvn.me/docs/components/toggle-button): An interactive toggle control for on/off or selected/unselected states
- [ToggleButtonGroup](https://hareui.alexzvn.me/docs/components/toggle-button-group): Groups multiple ToggleButtons into a unified control, allowing users to select one or multiple options.
- [Toolbar](https://hareui.alexzvn.me/docs/components/toolbar): A container for interactive controls with arrow key navigation.
- [Tooltip](https://hareui.alexzvn.me/docs/components/tooltip): Displays informative text when users hover over or focus on an element
- [Typography](https://hareui.alexzvn.me/docs/components/typography): A semantic typography primitive for headings, body copy, and inline code.

## Releases

- [All Releases](https://hareui.alexzvn.me/docs/releases/): Every @hareui/vue release, newest first.
- [v0.1.2](https://hareui.alexzvn.me/docs/releases/v0-1-2): ComboBox v-model input fix and server-side rendering fix.
- [v0.1.1](https://hareui.alexzvn.me/docs/releases/v0-1-1): Generic item types for collection components and whole-row toggling for Checkbox, Radio and Switch.
- [v0.1.0](https://hareui.alexzvn.me/docs/releases/v0-1-0): First public release of @hareui/vue.