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.
TermAnnotation
Concept form of the Annotation family: resolves a glossary term id to an inline definition popover, degrading to plain text when the id is unknown.
Glossary term
Rate limits use a algorithm to smooth out bursts.
Unknown id (degrades to text)
The token bucket entry is not in the glossary, so it renders as plain text.
DocAnnotation
Doc-preview form of the Annotation family: an internal link that lazily loads a title + summary on open; the error state still offers to open the page.
Lazy preview
See the for recommended settings.
Load error (retry + open fallback)
A stale link like the fails to preview but still navigates.
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) carried by a non-blank label; an optional icon reinforces it. 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, both, code, strikethrough and links.
Technical text stays literal
Leaves snake_case, MAX__VALUE__LIMIT, [a-z_]__[0-9] and 2*3*4 alone.
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