dr-ui
Components

Message

Inline status or helper text with a type-specific icon and styling.

Installation

npx shadcn@latest add @dr-ui/message

Registry dependencies

@dr-ui/utils
@dr-ui/thinking-icon

Dependencies

lucide-react@^1.7.0
class-variance-authority@^0.7.1

Base

Types

Informational message with the default icon and placement.

Your changes were saved successfully.

This action may affect other users in your workspace.

Something went wrong. Please try again in a moment.

This feature is not available for your account.

Planning...

Size and layout

Small message text for dense layouts.

Icon aligned to the right of the text.

Centered message for empty states or confirmations.

Custom icon

Override the default icon for a specific message type.