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.

componentsdropdown-menu.md

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

Dropdown Menu

Dropdown action menu

Parts: DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuGroup, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuArrow

DropdownMenuRoot

Props

Prop Type Default
defaultOpen boolean -
dir "ltr" | "rtl" -
modal boolean true
open boolean -

Emits

Event Payload
update:open [payload: boolean]

Slots

Slot Type
open boolean

DropdownMenuTrigger

Props

Prop Type Default
as AsTag | Component "button"
asChild boolean -
disabled boolean -

DropdownMenuPortal

Props

Prop Type Default
disabled boolean -
forceMount boolean -
to string | HTMLElement -

DropdownMenuContent

Props

Prop Type Default
align "start" | "center" | "end" -
alignOffset number -
arrowPadding number -
as AsTag | Component "div"
asChild boolean -
avoidCollisions boolean -
collisionBoundary Element | (Element | null)[] | null -
collisionPadding number | Partial<Record<"top" | "right" | "bott... -
forceMount boolean -
hideWhenDetached boolean -
loop boolean -
prioritizePosition boolean -
side "top" | "right" | "bottom" | "left" -
sideOffset number -
sticky "partial" | "always" -
updatePositionStrategy "always" | "optimized" -

Emits

Event Payload
closeAutoFocus [event: Event]
escapeKeyDown [event: KeyboardEvent]
focusOutside [event: FocusOutsideEvent]
interactOutside [event: PointerDownOutsideEvent | FocusOutsideE...
pointerDownOutside [event: PointerDownOutsideEvent]

DropdownMenuItem

Props

Prop Type Default
as AsTag | Component "div"
asChild boolean -
disabled boolean -
textValue string -

Emits

Event Payload
select [event: Event]

DropdownMenuCheckboxItem

Props

Prop Type Default
as AsTag | Component "div"
asChild boolean -
checked false | true | "indeterminate" -
disabled boolean -
textValue string -

Emits

Event Payload
select [event: Event]
update:checked [payload: boolean]

DropdownMenuRadioGroup

Props

Prop Type Default
as AsTag | Component "div"
asChild boolean -
modelValue string -

Emits

Event Payload
update:modelValue [payload: string]

DropdownMenuRadioItem

Props

Prop Type Default
as AsTag | Component "div"
asChild boolean -
disabled boolean -
textValue string -
value* string -

Emits

Event Payload
select [event: Event]

DropdownMenuItemIndicator

Props

Prop Type Default
as AsTag | Component "div"
asChild boolean -
forceMount boolean -

DropdownMenuLabel

Props

Prop Type Default
as AsTag | Component "div"
asChild boolean -

DropdownMenuGroup

Props

Prop Type Default
as AsTag | Component "div"
asChild boolean -

DropdownMenuSeparator

Props

Prop Type Default
as AsTag | Component "div"
asChild boolean -

DropdownMenuSub

Props

Prop Type Default
defaultOpen boolean -
open boolean -

Emits

Event Payload
update:open [payload: boolean]

Slots

Slot Type
open boolean

DropdownMenuSubTrigger

Props

Prop Type Default
as AsTag | Component "div"
asChild boolean -
disabled boolean -
textValue string -

DropdownMenuSubContent

Props

Prop Type Default
alignOffset number -
arrowPadding number -
as AsTag | Component "div"
asChild boolean -
avoidCollisions boolean -
collisionBoundary Element | (Element | null)[] | null -
collisionPadding number | Partial<Record<"top" | "right" | "bott... -
forceMount boolean -
hideWhenDetached boolean -
loop boolean -
prioritizePosition boolean -
sideOffset number -
sticky "partial" | "always" -
updatePositionStrategy "always" | "optimized" -

Emits

Event Payload
closeAutoFocus [event: Event]
entryFocus [event: Event]
escapeKeyDown [event: KeyboardEvent]
focusOutside [event: FocusOutsideEvent]
interactOutside [event: PointerDownOutsideEvent | FocusOutsideE...
openAutoFocus [event: Event]
pointerDownOutside [event: PointerDownOutsideEvent]

DropdownMenuArrow

Props

Prop Type Default
as AsTag | Component "svg"
asChild boolean -
height number 5
width number 10

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.