React Alert - Error with Title and Description
An error alert combining title and description text to explain what failed and provide recovery guidance
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Error occurred isn't helpful—users need to know why and what to do next. This React alert pairs an error title with descriptive text (AlertDescription) using shadcn/ui and Radix UI with destructive styling. Built with text-destructive/80 on description for subtle hierarchy below the bolder title, the pattern provides context for recovery. Perfect for API failures, processing errors, or any failure scenario where users need explanation beyond just Error—tell them what broke and how to fix it.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/alert-error-2.jsonnpx shadcn@latest add https://www.shadcn.io/registry/alert-error-2.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/alert-error-2.jsonbunx shadcn@latest add https://www.shadcn.io/registry/alert-error-2.jsonRelated patterns you will also like
Error with Title
Minimal error without explanation
Error with Actions
Error with retry and dismiss buttons
Warning with Description
Warning variant with context
Error with Action
Error with recovery button
Info with Description
Informational variant with details
Error Toast with Description
Transient error with context