Feedback

Status communication — alerts, toasts, progress bars, and loading states.

Alert

Inline status messages. Supports all semantic colors and 4 variants.

Alert title

This is the alert description providing additional context.

<UAlert
  color="primary"
  variant="subtle"
  title="Alert title"
  description="Additional context here."
  icon="i-lucide-info"
/>

Temporary notification overlays triggered programmatically via useToast().

const toast = useToast()
toast.add({
  title: 'Notification',
  description: 'Message here.',
  color: 'primary'
})

Linear progress indicator. Drag the slider below to adjust value.

<UProgress :value="value" color="primary" size="md" />

Loading placeholder that mimics content structure.