Catalog
Per-component entries grouped by task, mirroring the skill's component references. Real rendered instances live here; props and full usage live in the references — follow the Usage link on each entry.
Forms
UFormField
Wraps a control to wire up label, description, error, and ARIA.
Label + description
Used for sign-in
Error state
UForm
Binds reactive state (and an optional schema) for validated submits.
State-bound form
控件 · Controls
The control primitives — always placed inside a UFormField.
Text inputs
Select
Toggles
Feedback
UAlert
Inline message pairing icon, semantic color, title, and description.
Semantic colors
UToast
Transient notification fired via the useToast() composable.
Trigger
UProgress
Determinate or indeterminate progress indicator.
Values
USkeleton
Loading placeholder built from Tailwind size classes.
Content placeholder
Overlays
UModal
Modal dialog with focus trap, overlay, and Esc-to-close.
Dialog
USlideover
Edge-anchored panel with the same modal semantics as UModal.
Right panel
UPopover
Non-modal floating panel that can hold interactive content.
Click trigger
AnnotationPopover
Inline annotation trigger anchored to a non-modal popover, with hover enhancement and async chrome.
Inline term
Rate limits use a algorithm to smooth out bursts.
Loading
The variant refills at a constant rate.
Error
A drains requests at a fixed pace.
UTooltip
Assistive hint only — never place buttons or links inside.
Icon hint
UDropdownMenu
Keyboard-accessible action menu grouped into sections.
Actions
Data display
UCard
Content container with header, body, and footer slots.
With header + footer
Project settings
Body content coloured with semantic tokens.
UTable
Semantic data table with custom column definitions.
Rows
| Project | Status |
|---|---|
| Landing page | Published |
| Docs site | Draft |
| Dashboard | Published |
UBadge
Non-interactive status, category, or count marker.
Colors
SemanticBadge
Tone atom over UBadge: a curated semantic tone (success/warning/neutral/error/info/secondary) paired with an icon + label. Domain→tone mapping stays in presets.
Tones
InlineCode
Inline code token on a tonal surface (Nuxt UI ProseCode calibrated to Geist: 6px radius, Copy 13 Mono). For values, defaults and allowed values within prose.
In a sentence
Set timeout_ms to a value such as 3000.
InlineMarkdown
Synchronous, SSR-stable renderer for the inline markdown subset (code, links, bold, em, strikethrough). Lighter than MDC for authored copy that is always inline.
Inline subset
Supports bold, em, code, strikethrough and links.
UKbd
Keyboard key hint (display only).
Shortcut
USeparator
Divider line, optionally labelled.
Variants
UAvatar
User avatar with icon or initials fallback; group to stack.
Single + group