# Reka UI - Unstyled, fully accessible UI library

source: https://reka-ui.com/llms.txt

> An open-source library with unstyled, primitive components, accompanied by a variety of examples & use cases ready to be integrated into your projects.

## Table of Contents

### Overview

- [Introduction](https://reka-ui.com/docs/overview/introduction.md): An open-source UI component library for building high-quality, accessible design systems and web apps using Vue.
- [Getting started](https://reka-ui.com/docs/overview/getting-started.md): A quick tutorial to get you up and running with Reka UI.
- [Installation](https://reka-ui.com/docs/overview/installation.md)
- [Accessibility](https://reka-ui.com/docs/overview/accessibility.md): Reka UI follow the WAI-ARIA authoring practices guidelines and are tested in a wide selection of modern browsers and commonly used assistive technologies.
- [Releases](https://reka-ui.com/docs/overview/releases.md): Discover the latest release of Reka UI.

### Guides

- [Styling](https://reka-ui.com/docs/guides/styling.md): Reka UI are unstyled—and compatible with any styling solution—giving you complete control over styling.
- [Animation/Transition](https://reka-ui.com/docs/guides/animation.md): Animate Reka UI with CSS keyframes, native Vue Transition or JavaScript animation library of your choice.
- [Composition](https://reka-ui.com/docs/guides/composition.md): Use the `asChild` prop to compose Reka's functionality onto alternative element types or your own Vue components.
- [Controlled State](https://reka-ui.com/docs/guides/controlled-state.md): How to work with controlled vs. uncontrolled state in Reka UI.
- [Server side rendering](https://reka-ui.com/docs/guides/server-side-rendering.md): Reka UI can be rendered on the server.
- [Namespaced components](https://reka-ui.com/docs/guides/namespaced-components.md)
- [Dates & Times](https://reka-ui.com/docs/guides/dates.md): How to work with dates and times in Reka UI.
- [Internationalization (RTL)](https://reka-ui.com/docs/guides/i18n.md): Reka UI support both LTR/RTL directions. Learn more about how to integrate internationalization.
- [Inject Context](https://reka-ui.com/docs/guides/inject-context.md): Utilize `injectContext` to enhance component composition in Reka UI, enabling powerful and flexible UI development.
- [Virtualization](https://reka-ui.com/docs/guides/virtualization.md): Learn how to efficiently render large datasets with Reka UI, powered by `@tanstack/virtual`.
- [Migration - Radix Vue to Reka UI](https://reka-ui.com/docs/guides/migration.md): This guide provides step-by-step instructions for developers transitioning their projects from Radix Vue to Reka UI.

### Components

#### Form

- [Autocomplete](https://reka-ui.com/docs/components/autocomplete.md): An input with suggestions that allows free-form text entry. Unlike Combobox, the value is the input text itself rather than a selected item.
- [Checkbox](https://reka-ui.com/docs/components/checkbox.md): A control that allows the user to toggle between checked and not checked.
- [Combobox](https://reka-ui.com/docs/components/combobox.md): Choose from a list of suggested values with full keyboard support.
- [Editable](https://reka-ui.com/docs/components/editable.md): Displays an input field used for editing a single line of text, rendering as static text on load.
- [Listbox](https://reka-ui.com/docs/components/listbox.md): A control that allows the user to toggle between checked and not checked.
- [Number Field](https://reka-ui.com/docs/components/number-field.md): A number field allows a user to enter a number and increment or decrement the value using stepper buttons.
- [Label](https://reka-ui.com/docs/components/label.md): Renders an accessible label associated with controls.
- [Pin Input](https://reka-ui.com/docs/components/pin-input.md): A sequence of one-character alphanumeric inputs.
- [Radio Group](https://reka-ui.com/docs/components/radio-group.md): A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
- [Select](https://reka-ui.com/docs/components/select.md): Displays a list of options for the user to pick from—triggered by a button.
- [Slider](https://reka-ui.com/docs/components/slider.md): An input where the user selects a value from within a given range.
- [Switch](https://reka-ui.com/docs/components/switch.md): A control that allows the user to toggle between checked and not checked.
- [Tags Input](https://reka-ui.com/docs/components/tags-input.md): Tags input render tags inside an input, followed by an actual text input.
- [Toggle](https://reka-ui.com/docs/components/toggle.md): A two-state button that can be either on or off.
- [Toggle Group](https://reka-ui.com/docs/components/toggle-group.md): A set of two-state buttons that can be toggled on or off.

#### Color

- [Color Area](https://reka-ui.com/docs/components/color-area.md): A two-dimensional area for selecting color values in a specific color space.
- [Color Field](https://reka-ui.com/docs/components/color-field.md): An input field for entering and editing color values in various formats.
- [Color Slider](https://reka-ui.com/docs/components/color-slider.md): A slider control for adjusting individual color channels.
- [Color Swatch](https://reka-ui.com/docs/components/color-swatch.md): A predefined color block that allows users to quickly select commonly used or brand-specific colors.
- [Color Swatch Picker](https://reka-ui.com/docs/components/color-swatch-picker.md): A component that allows users to select from a set of predefined colors, often used for themes or branding.

#### Dates

- [Calendar](https://reka-ui.com/docs/components/calendar.md): Displays dates and days of the week, facilitating date-related interactions.
- [Date Field](https://reka-ui.com/docs/components/date-field.md): Enables users to input specific dates within a designated field.
- [Date Picker](https://reka-ui.com/docs/components/date-picker.md): Facilitates the selection of dates through an input and calendar-based interface.
- [Date Range Field](https://reka-ui.com/docs/components/date-range-field.md): Allows users to input a range of dates within a designated field.
- [Date Range Picker](https://reka-ui.com/docs/components/date-range-picker.md): Facilitates the selection of date ranges through an input and calendar-based interface.
- [RangeCalendar](https://reka-ui.com/docs/components/range-calendar.md): Presents a calendar view tailored for selecting date ranges.
- [Time Field](https://reka-ui.com/docs/components/time-field.md): Enables users to input specific times within a designated field.
- [Time Range Field](https://reka-ui.com/docs/components/time-range-field.md): Allows users to input a range of times within a designated field.
- [MonthPicker](https://reka-ui.com/docs/components/month-picker.md): Presents a calendar view tailored for selecting months.
- [MonthRangePicker](https://reka-ui.com/docs/components/month-range-picker.md): Presents a calendar view tailored for selecting month ranges.
- [YearPicker](https://reka-ui.com/docs/components/year-picker.md): Presents a calendar view tailored for selecting years.
- [YearRangePicker](https://reka-ui.com/docs/components/year-range-picker.md): Presents a calendar view tailored for selecting year ranges.

#### General

- [Accordion](https://reka-ui.com/docs/components/accordion.md): A vertically stacked set of interactive headings that each reveal an associated section of content.
- [Alert Dialog](https://reka-ui.com/docs/components/alert-dialog.md): A modal dialog that interrupts the user with important content and expects a response.
- [Aspect Ratio](https://reka-ui.com/docs/components/aspect-ratio.md): Displays content within a desired ratio.
- [Avatar](https://reka-ui.com/docs/components/avatar.md): An image element with a fallback for representing the user.
- [Collapsible](https://reka-ui.com/docs/components/collapsible.md): An interactive component which expands/collapses a panel.
- [Context Menu](https://reka-ui.com/docs/components/context-menu.md): Displays a menu located at the pointer, triggered by a right-click or a long-press.
- [Dialog](https://reka-ui.com/docs/components/dialog.md): A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
- [Dropdown Menu](https://reka-ui.com/docs/components/dropdown-menu.md): Displays a menu to the user—such as a set of actions or functions—triggered by a button.
- [Hover Card](https://reka-ui.com/docs/components/hover-card.md): For sighted users to preview content available behind a link.
- [Menubar](https://reka-ui.com/docs/components/menubar.md): A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
- [Navigation Menu](https://reka-ui.com/docs/components/navigation-menu.md): A collection of links for navigating websites.
- [Pagination](https://reka-ui.com/docs/components/pagination.md): Displays data in paged format and provides navigation between pages.
- [Popover](https://reka-ui.com/docs/components/popover.md): Displays rich content in a portal, triggered by a button.
- [Progress](https://reka-ui.com/docs/components/progress.md): Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
- [Scroll Area](https://reka-ui.com/docs/components/scroll-area.md): Augments native scroll functionality for custom, cross-browser styling.
- [Separator](https://reka-ui.com/docs/components/separator.md): Visually or semantically separates content.
- [Splitter](https://reka-ui.com/docs/components/splitter.md): A component that divides your layout into resizable sections.
- [Stepper](https://reka-ui.com/docs/components/stepper.md): A set of steps that are used to indicate progress through a multi-step process.
- [Tabs](https://reka-ui.com/docs/components/tabs.md): A set of layered sections of content—known as tab panels—that are displayed one at a time.
- [Toast](https://reka-ui.com/docs/components/toast.md): A succinct message that is displayed temporarily.
- [Toolbar](https://reka-ui.com/docs/components/toolbar.md): A container for grouping a set of controls, such as buttons, toggle groups or dropdown menus.
- [Tooltip](https://reka-ui.com/docs/components/tooltip.md): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
- [Tree](https://reka-ui.com/docs/components/tree.md): A tree view widget displays a hierarchical list of items that can be expanded or collapsed to show or hide their child items, such as in a file system navigator.

### Utilities

#### Component

- [Config Provider](https://reka-ui.com/docs/utilities/config-provider.md): Wraps your app to provide global configurations.
- [Focus Scope](https://reka-ui.com/docs/utilities/focus-scope.md): Manages focus within a component boundary with support for trapping and looping focus navigation.
- [Presence](https://reka-ui.com/docs/utilities/presence.md): Manages mounting and unmounting of element with transition support.
- [Primitive](https://reka-ui.com/docs/utilities/primitive.md): Compose Reka's functionality onto alternative element types or your own Vue components.
- [Roving Focus](https://reka-ui.com/docs/utilities/roving-focus.md): Utility component that implements the roving tabindex method to manage focus between items.
- [Slot](https://reka-ui.com/docs/utilities/slot.md): Merges its props onto its immediate child.
- [Visually Hidden](https://reka-ui.com/docs/utilities/visually-hidden.md): Hides content from the screen in an accessible way.

#### Composable

- [useId](https://reka-ui.com/docs/utilities/use-id.md): Generate random id
- [useDateFormatter](https://reka-ui.com/docs/utilities/use-date-formatter.md): Creates a wrapper around the `DateFormatter`, which is an improved version of the Intl.DateTimeFormat API, that is used internally by the various date builders to easily format dates in a consistent way.
- [useDirection](https://reka-ui.com/docs/utilities/use-direction.md): Access the current direction
- [useLocale](https://reka-ui.com/docs/utilities/use-locale.md): Access the current locale
- [useEmitAsProps](https://reka-ui.com/docs/utilities/use-emit-as-props.md): Convert emits into object similar to props
- [useFilter](https://reka-ui.com/docs/utilities/use-filter.md): Locale-Aware string filtering
- [useForwardExpose](https://reka-ui.com/docs/utilities/use-forward-expose.md): Forward component's exposed value, props and $el.
- [useForwardProps](https://reka-ui.com/docs/utilities/use-forward-props.md): Forward component's props without boolean casting
- [useForwardPropsEmits](https://reka-ui.com/docs/utilities/use-forward-props-emits.md): Combinations for useForwardProps & useEmitAsProps


