Loading source
Pulling the file list, source metadata, and syntax-aware rendering for this listing.
Source from repo
Build accessible, unstyled Vue 3 components using Reka UI (formerly Radix Vue) with WAI-ARIA compliance.
Files
Skill
Size
Entrypoint
Format
Open file
Syntax-highlighted preview of this file as included in the skill package.
references/components.md
1# Components2> Auto-generated. Run `npx tsx skills/reka-ui/scripts/generate-components.ts` to update.4## Form6| Component | Description | File |8| --------------- | ------------------------------------------- | ---------------------------- |9| **checkbox** | Selection control with indeterminate state | `components/checkbox.md` |10| **combobox** | Searchable dropdown with filtering | `components/combobox.md` |11| **editable** | Inline text editing with preview/edit modes | `components/editable.md` |12| **label** | Accessible form label | `components/label.md` |13| **listbox** | Accessible list selection | `components/listbox.md` |14| **numberField** | Numeric input with increment/decrement | `components/number-field.md` |15| **pinInput** | Multi-character code entry (OTP) | `components/pin-input.md` |16| **radioGroup** | Mutually exclusive selection | `components/radio-group.md` |17| **select** | Dropdown selection with grouping | `components/select.md` |18| **slider** | Range input control | `components/slider.md` |19| **switch** | Toggle between two states | `components/switch.md` |20| **tagsInput** | Multiple tag entry and management | `components/tags-input.md` |21| **toggle** | Single state button toggle | `components/toggle.md` |22| **toggleGroup** | Multiple toggles with group behavior | `components/toggle-group.md` |23## Date25| Component | Description | File |27| ------------------- | --------------------------------- | --------------------------------- |28| **calendar** | Date selection grid (alpha) | `components/calendar.md` |29| **dateField** | Date input field (alpha) | `components/date-field.md` |30| **datePicker** | Date picker with calendar (alpha) | `components/date-picker.md` |31| **dateRangeField** | Date range input (alpha) | `components/date-range-field.md` |32| **dateRangePicker** | Date range picker (alpha) | `components/date-range-picker.md` |33| **rangeCalendar** | Calendar for date ranges (alpha) | `components/range-calendar.md` |34| **timeField** | Time input field (alpha) | `components/time-field.md` |35## Disclosure37| Component | Description | File |39| --------------- | ---------------------------- | --------------------------- |40| **accordion** | Collapsible content sections | `components/accordion.md` |41| **collapsible** | Single collapsible panel | `components/collapsible.md` |42## Overlay44| Component | Description | File |46| --------------- | ----------------------------- | ---------------------------- |47| **alertDialog** | Modal dialog requiring action | `components/alert-dialog.md` |48| **dialog** | Modal dialog | `components/dialog.md` |49| **hoverCard** | Card shown on hover | `components/hover-card.md` |50| **popover** | Floating content panel | `components/popover.md` |51| **tooltip** | Informational hover tip | `components/tooltip.md` |52| **toast** | Temporary notifications | `components/toast.md` |53## Menu55| Component | Description | File |57| ------------------ | ------------------------ | ------------------------------- |58| **contextMenu** | Right-click context menu | `components/context-menu.md` |59| **dropdownMenu** | Dropdown action menu | `components/dropdown-menu.md` |60| **menubar** | Horizontal menu bar | `components/menubar.md` |61| **navigationMenu** | Site navigation menu | `components/navigation-menu.md` |62## Data64| Component | Description | File |66| -------------- | ----------------------------- | --------------------------- |67| **avatar** | User image with fallback | `components/avatar.md` |68| **pagination** | Page navigation | `components/pagination.md` |69| **progress** | Progress indicator | `components/progress.md` |70| **rating** | Star rating input (v2.8.0) | `components/rating.md` |71| **scrollArea** | Custom scrollbar container | `components/scroll-area.md` |72| **separator** | Visual divider | `components/separator.md` |73| **splitter** | Resizable split panels | `components/splitter.md` |74| **stepper** | Multi-step progress indicator | `components/stepper.md` |75| **tabs** | Tabbed content panels | `components/tabs.md` |76| **tree** | Hierarchical tree view | `components/tree.md` |77## Layout79| Component | Description | File |81| --------------- | ---------------------------- | ---------------------------- |82| **aspectRatio** | Maintain aspect ratio | `components/aspect-ratio.md` |83| **toolbar** | Toolbar with buttons/toggles | `components/toolbar.md` |84## Utility86| Component | Description | File |88| ------------------ | -------------------------- | ------------------------------- |89| **configProvider** | Global config context | `components/config-provider.md` |90| **focusScope** | Focus trap container | `components/focus-scope.md` |91| **presence** | Animation presence control | `components/presence.md` |92| **primitive** | Base element wrapper | `components/primitive.md` |93| **visuallyHidden** | Screen reader only content | `components/visually-hidden.md` |94## Composables96| Composable | Description |98| ---------------------- | ------------------------------------------------------------------ |99| `useEmitAsProps` | Convert emit functions to props for passing to child components |100| `useFilter` | Filter items based on search query with customizable matching |101| `useForwardProps` | Forward props to child components while filtering out handled ones |102| `useForwardPropsEmits` | Combine useForwardProps and useEmitAsProps |103| `useForwardExpose` | Forward exposed methods/refs from child components |104| `useId` | Generate unique IDs for accessibility attributes |105| `useDateFormatter` | Format dates with locale support |106| `useDirection` | Get/set text direction (ltr/rtl) |107| `useLocale` | Get/set locale for internationalization |108