Back to Alerts & Toasts
Checklist Alert
A neutral alert that expands into a short checklist of outstanding account setup steps, collapsible via its own chevron toggle.
3 things need your attention
Finish setting up your account.
- Verify your email address
- Add a backup sign-in method
- Turn on two-factor authentication
Alerts & Toastsalertbannerchecklistcollapsibleonboarding
Stack: React + Tailwind CSS + shadcn/ui — every prompt is written for this stack and is most accurate in it.
Dependencies: lucide-react
Overview
Layout
Icon chip + title-with-inline-chevron + collapsible 3-item checklist
Color
bg-muted icon chip — routine setup nudge, not a warning
Motion
Chevron rotates 180°; panel height-animates open/close
Accessibility
Toggle wired via aria-expanded/aria-controls