skilld
All skills
onmax avatar

/reka-ui

@1059cab official
by Maxonmax/nuxt-skills715 stars
38

Use when building with Reka UI (headless Vue components) - provides component API, accessibility patterns, composition (asChild), controlled/uncontrolled state, virtualization, and styling integration. Formerly Radix Vue.

Ask your Agent

Use this Skill: https://skilld.dev/gh/onmax/nuxt-skills/reka-ui

This session only. Nothing lands on disk.

referencescomponents.md

≈1.8k tokens on demand. Your agent reads this file only when SKILL.md points to it.

Components

Auto-generated. Run npx tsx skills/reka-ui/scripts/generate-components.ts to update.

Form

Component Description File
checkbox Selection control with indeterminate state components/checkbox.md
combobox Searchable dropdown with filtering components/combobox.md
editable Inline text editing with preview/edit modes components/editable.md
label Accessible form label components/label.md
listbox Accessible list selection components/listbox.md
numberField Numeric input with increment/decrement components/number-field.md
pinInput Multi-character code entry (OTP) components/pin-input.md
radioGroup Mutually exclusive selection components/radio-group.md
select Dropdown selection with grouping components/select.md
slider Range input control components/slider.md
switch Toggle between two states components/switch.md
tagsInput Multiple tag entry and management components/tags-input.md
toggle Single state button toggle components/toggle.md
toggleGroup Multiple toggles with group behavior components/toggle-group.md

Date

Component Description File
calendar Date selection grid (alpha) components/calendar.md
dateField Date input field (alpha) components/date-field.md
datePicker Date picker with calendar (alpha) components/date-picker.md
dateRangeField Date range input (alpha) components/date-range-field.md
dateRangePicker Date range picker (alpha) components/date-range-picker.md
rangeCalendar Calendar for date ranges (alpha) components/range-calendar.md
timeField Time input field (alpha) components/time-field.md

Disclosure

Component Description File
accordion Collapsible content sections components/accordion.md
collapsible Single collapsible panel components/collapsible.md

Overlay

Component Description File
alertDialog Modal dialog requiring action components/alert-dialog.md
dialog Modal dialog components/dialog.md
hoverCard Card shown on hover components/hover-card.md
popover Floating content panel components/popover.md
tooltip Informational hover tip components/tooltip.md
toast Temporary notifications components/toast.md

Menu

Component Description File
contextMenu Right-click context menu components/context-menu.md
dropdownMenu Dropdown action menu components/dropdown-menu.md
menubar Horizontal menu bar components/menubar.md
navigationMenu Site navigation menu components/navigation-menu.md

Data

Component Description File
avatar User image with fallback components/avatar.md
pagination Page navigation components/pagination.md
progress Progress indicator components/progress.md
rating Star rating input (v2.8.0) components/rating.md
scrollArea Custom scrollbar container components/scroll-area.md
separator Visual divider components/separator.md
splitter Resizable split panels components/splitter.md
stepper Multi-step progress indicator components/stepper.md
tabs Tabbed content panels components/tabs.md
tree Hierarchical tree view components/tree.md

Layout

Component Description File
aspectRatio Maintain aspect ratio components/aspect-ratio.md
toolbar Toolbar with buttons/toggles components/toolbar.md

Utility

Component Description File
configProvider Global config context components/config-provider.md
focusScope Focus trap container components/focus-scope.md
presence Animation presence control components/presence.md
primitive Base element wrapper components/primitive.md
visuallyHidden Screen reader only content components/visually-hidden.md

Composables

Composable Description
useEmitAsProps Convert emit functions to props for passing to child components
useFilter Filter items based on search query with customizable matching
useForwardProps Forward props to child components while filtering out handled ones
useForwardPropsEmits Combine useForwardProps and useEmitAsProps
useForwardExpose Forward exposed methods/refs from child components
useId Generate unique IDs for accessibility attributes
useDateFormatter Format dates with locale support
useDirection Get/set text direction (ltr/rtl)
useLocale Get/set locale for internationalization

Source: SKILL.md on GitHub

Third-party checks

1 alert10d4 checks · Risk CRITICAL
  • Gen Agent Trust Hub10d

    This skill provides documentation and API references for the Reka UI library. It includes a utility script to synchronize documentation with the official GitHub repository, which presents a surface for indirect prompt injection if the external source were compromised.

  • Socket10d

    No alerts

  • Snyk10d

    Risk: LOW · No issues

  • Runlayer7mo

    54 files scanned · No issues

Provenance

Signed by skilld at 1059cab. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 days ago.

Activeupdated 8 months ago

Topics

  • Vue
  • Nuxt
  • reka-ui
  • components
  • headless
  • accessible
  • aria
  • forms
  • dialogs

README badge

README badge for onmax/nuxt-skills/reka-ui

What it does

Unstyled, WAI-ARIA compliant Vue 3 component primitives with support for controlled/uncontrolled state, composition patterns, and virtualization. Use when building headless components from scratch or integrating with Reka-based libraries like Nuxt UI or shadcn-vue.

Generated from the current SKILL.md.

Frequently asked

Does Reka UI include styling?
No. Reka UI provides unstyled, WAI-ARIA compliant component primitives. You apply styling yourself or use a styled wrapper library like Nuxt UI or shadcn-vue.
Can I use Reka UI with Nuxt?
Yes. Install the `reka-ui/nuxt` module in nuxt.config.ts for auto-imports of all components, or use the unplugin-vue-components resolver in a standard Vite setup.
How do I control component state?
Use `v-model:open` or `v-model` for controlled state, or `default*` props (like `default-value`) for uncontrolled state.
Does this skill cover styled component libraries built on Reka?
For Nuxt UI and other styled Reka-based components, use the nuxt-ui skill instead. This skill focuses on the unstyled primitives.
What is the `asChild` prop?
It merges the component's behavior and props onto a child element instead of wrapping it, letting you use your own custom element while maintaining accessibility and state management.

Generated from the current SKILL.md. These answers refresh after source changes.