Aspect Ratio
Maintain aspect ratio
Parts: AspectRatio
AspectRatio
Props
| Prop | Type | Default |
|---|---|---|
as |
AsTag | Component |
"div" |
asChild |
boolean |
- |
ratio |
number |
1 |
Slots
| Slot | Type |
|---|---|
aspect |
number |
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.
≈78 tokens on demand. Your agent reads this file only when SKILL.md points to it.
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
README badge
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.