# Introduction **Category**: vue **URL**: 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. HareUI is a Vue 3 component library that ports [HeroUI v3](https://heroui.com) (React, Tailwind CSS v4, React Aria Components) to Vue. Instead of wrapping React Aria, HareUI is rebuilt on [Reka UI](https://reka-ui.com) for headless behavior, with the exact same visual design as HeroUI — verified with an automated computed-style and screenshot diff against `@heroui/react`. The component API itself follows Nuxt UI conventions rather than HeroUI's compound components: named template slots instead of `Card.Header`, a `:ui` prop for per-slot class overrides, a `class` prop merged into the root element, and an optional app-level `createHareUI()` config for global theme overrides. ## Why HareUI? **Visually identical to HeroUI** — Every component's computed styles and rendered pixels are diffed against `@heroui/react` so the two stay in sync. **Accessible** — Built on [Reka UI](https://reka-ui.com) primitives with focus management, keyboard navigation, and screen reader support. **Flexible** — Each component exposes named slots and a `:ui` prop. Change what you need, leave the rest. **Vue-native** — ` ``` Because `tv({ extend })` merges with tailwind-merge, the new variant's classes win over the base theme's conflicting utilities without touching the original `button` theme file. ## Responsive Design `class` and `:ui` accept any Tailwind utility, including responsive variants: ```vue ``` ## CSS Modules Vue's ```` ## Next Steps - Learn about [Animation](/docs/getting-started/animation) techniques - Explore the [Theming](/docs/getting-started/theming) system - Browse [Component](/docs/components/button) examples # Animation **Category**: vue **URL**: https://hareui.alexzvn.me/docs/getting-started/animation > Add smooth animations and transitions to HareUI components. HareUI ships [tw-animate-css](https://github.com/Wombosvideo/tw-animate-css) and exposes component state through `data-state`/`data-slot` attributes, so entrance/exit transitions are plain Tailwind utilities — no JavaScript animation library required. ## Built-in Animations Overlay components (Modal, Popover, Tooltip) use Reka UI's `data-state` to drive enter/exit transitions: ```css /* Popover entrance/exit */ [data-slot="popover"][data-state="open"] { @apply animate-in zoom-in-90 fade-in-0 duration-200; } [data-slot="popover"][data-state="closed"] { @apply animate-out zoom-out-95 fade-out duration-150; } /* Button press effect */ [data-slot="button"]:active { transform: scale(0.97); } ``` **`data-state` → Tailwind variant mapping:** | Reka `data-state` | Tailwind selector | Used by | |---|---|---| | `checked` / `indeterminate` | `data-[state=checked]:`, `data-[state=indeterminate]:` | Checkbox, Switch, Radio | | `active` | `data-[state=active]:` | Tabs trigger | | `open` | `data-[state=open]:` | Modal, Popover, Tooltip (`delayed-open`/`instant-open` for Tooltip) | | `closed` | `data-[state=closed]:` | Modal, Popover, Tooltip — the node stays mounted until the exit animation finishes | ```css /* Fade + zoom on open, fade out on close */ [data-slot="modal-dialog"] { @apply data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95; @apply data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95; } ``` ## CSS Animations **Using Tailwind utilities:** ```vue Hover me ``` **Custom transitions:** ```css /* Bouncy button press */ [data-slot="button"]:active { animation: bounce 0.3s; } @keyframes bounce { 50% { transform: scale(0.95); } } ``` ## Accessibility: Respecting Motion Preferences HareUI's built-in transitions use Tailwind's `motion-reduce:` variant, so they are automatically disabled when a user enables "reduce motion" in their system settings: ```css /* HareUI pattern — uses Tailwind's motion-reduce: */ [data-slot="button"] { @apply transition-colors motion-reduce:transition-none; } ``` This expands to support both the native media query and an explicit opt-out: ```css @media (prefers-reduced-motion: reduce) { [data-slot="button"] { transition: none; } } ``` **Disabling animations globally:** add `data-reduce-motion="true"` to `` or ``: ```html ``` ## Performance Tips **Prefer GPU-accelerated properties** — `transform` and `opacity` instead of layout-triggering properties: ```css /* Good — GPU accelerated */ .slide-in { transform: translateX(-100%); transition: transform 0.3s; } /* Avoid — triggers layout */ .slide-in { left: -100%; transition: left 0.3s; } ``` ## Next Steps - Learn about [Styling](/docs/getting-started/styling) approaches - Explore the [Theming](/docs/getting-started/theming) system - Browse [Component](/docs/components/modal) examples # Composition **Category**: vue **URL**: https://hareui.alexzvn.me/docs/getting-started/composition > Build flexible UI with named slots, scoped slot props, and the as prop. HareUI replaces HeroUI's compound-component pattern (`Card.Header`, `Alert.Icon`, …) with named template slots on a single component, plus a `:ui` prop for per-slot classes and an `as` prop to change the rendered element. This page covers the three composition tools you'll use across every component. ## Named Slots Each component documents its available slots on its own Anatomy section. A slot renders only when you pass content to it (or, for some components, when a shorthand prop like `title` is set) — otherwise the wrapping element is omitted entirely. ```vue ``` Compare to HeroUI's compound parts: ::: code-group ```tsx [HeroUI (React)] import { Card } from '@heroui/react'; Settings Body Save ``` ```vue [HareUI (Vue)] ``` ::: ## Scoped Slot Props Some slots expose internal state as scoped slot props, so you can render different content depending on what the component is doing — no render-prop wrapper needed. `Button`'s `leading`, `default`, and `trailing` slots all receive `{ pending }`: ```vue ``` By default the `leading` slot renders a `Spinner` while `pending` is true — overriding the slot replaces that default entirely, so check `pending` yourself if you still want a loading indicator. ## The `as` Prop Components with a non-interactive root (`Button`, `Card`, `Chip`) accept an `as` prop to change the rendered element while keeping the same classes and `data-slot` attributes: ```vue ``` When `as` is not `"button"`, `Button` swaps the native `disabled` attribute for `aria-disabled="true"` + `tabindex="-1"` so the element stays accessible as a link. ## Combining Slots, `:ui`, and `as` All three compose together — swap the element, override one slot's classes, and still use scoped slot props: ```vue ``` ## Custom Components Compose HareUI primitives into your own components the same way you'd compose any Vue component — no variant-function glue required: ```vue ``` ```vue ``` ## Custom Variants Extend a component's exported theme config with `tv()` to add variants the original doesn't have, instead of forking the component: ```vue ``` See [Styling → Extending Component Themes](/docs/getting-started/styling#extending-component-themes) for how the resolved class merges with the `class` prop. ## Next Steps - Learn about [Styling](/docs/getting-started/styling) with `class` and `:ui` - Explore [Animation](/docs/getting-started/animation) with `data-state` selectors - Browse [Component](/docs/components/button) anatomy sections for each component's slot list # LLMs.txt **Category**: vue **URL**: 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. HareUI publishes [llms.txt](https://llmstxt.org/) files so AI coding assistants can reference accurate, up-to-date documentation instead of guessing at the API from training data. ## Available Files - [/llms.txt](https://hareui.alexzvn.me/llms.txt) — Index of every documentation page with a one-line description, grouped by Getting Started and Components. - [/llms-full.txt](https://hareui.alexzvn.me/llms-full.txt) — The complete documentation: every page's content, with live demo placeholders expanded into their actual `.vue` source and API reference tables rendered as Markdown tables. Both files are generated from the same Markdown source as this site, so they stay in sync automatically on every deploy — nothing is hand-maintained separately. ## Integration **Claude Code / Claude:** Tell Claude to reference the documentation: ``` Use HareUI documentation from https://hareui.alexzvn.me/llms.txt ``` **Cursor:** Use the `@Docs` feature: ``` @Docs https://hareui.alexzvn.me/llms-full.txt ``` **Windsurf:** Add to your `.windsurfrules` file: ``` #docs https://hareui.alexzvn.me/llms-full.txt ``` **Other AI tools:** Most assistants can fetch documentation by URL. Provide: ``` https://hareui.alexzvn.me/llms.txt ``` Prefer `llms.txt` for tools with limited context — it's an index with short descriptions and links. Use `llms-full.txt` when the tool can fetch and hold the entire corpus, since it includes every component's demo source and prop/slot/emit tables inline. ## What's Inside Each page in `llms-full.txt` is wrapped with a header in a consistent format before its content: ``` # **Category**: vue **URL**: https://hareui.alexzvn.me/docs/... > ``` `` demo references are replaced with the actual Vue single-file component source in a fenced code block, and `` references are replaced with a Markdown table of props, slots, or emits — so an AI assistant reading `llms-full.txt` sees real, copy-pasteable component code rather than a placeholder. # All Components (Vue) **Category**: vue **URL**: https://hareui.alexzvn.me/docs/components/ > Explore the full list of components available in the library. More are on the way. ## Buttons ## Collections ## Colors ## Controls ## Data Display ## Date and Time ## Feedback ## Forms ## Layout ## Media ## Navigation ## Overlays ## Pickers ## Typography ## Utilities # Accordion **Category**: vue **URL**: https://hareui.alexzvn.me/docs/components/accordion > A collapsible content panel for organizing information in a compact space ## Usage ```vue ``` ```vue ``` ## Anatomy Accordion renders one item per `items` entry: a heading with a trigger button (leading content, label, indicator) and a collapsible panel holding the body. HeroUI's compound parts (`Accordion.Item`, `Accordion.Heading`, `Accordion.Trigger`, `Accordion.Indicator`, `Accordion.Panel`, `Accordion.Body`) become `items`, slots and `ui` keys: ```vue