Docs
Admonition
Admonition
A versatile callout component for displaying important information with different severity levels and custom styling options.
Note
This is a note admonition with some important information that users should be aware of
Overview
The Admonition component helps communicate important information to users through visually distinct callout blocks, making it essential for documentation, warnings, and contextual guidance. It provides seven semantic types with appropriate color schemes and icons, ensuring users can quickly identify the importance and nature of the message. Perfect for improving user comprehension and reducing support requests.
Installation
pnpm dlx shadcn@latest add https://deltacomponents.dev/r/admonition.json
Usage
import Admonition from "@/registry/components/admonition"
export function Component() {
return (
<Admonition type="warning" title="Important Notice">
This is an important message that users should pay attention to.
</Admonition>
)
}API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | "note" | "tip" | "info" | "warning" | "danger" | "success" | "caution" | "note" | Visual style and semantic meaning |
title | string | undefined | Optional heading text |
children | ReactNode | - | Content body (required) |
icon | ComponentType<{className?: string}> | undefined | Custom icon override |
className | string | "" | Additional CSS classes |
Examples
All Types
Display all available admonition types with their default styling and semantic meanings.
Note
This is a note admonition for general information.
Info
This is an info admonition for informational content.
Tip
This is a tip admonition for helpful suggestions.
Success
This is a success admonition for positive outcomes.
Warning
This is a warning admonition for cautionary information.
Caution
This is a caution admonition for important warnings.
Danger
This is a danger admonition for critical alerts.
Custom Icons
Override default icons with custom Lucide React components for specialized use cases.
Custom Heart Icon
This admonition uses a custom heart icon instead of the default tip icon.
Custom Star Icon
This success admonition features a custom star icon.
Custom Lightning Icon
This warning uses a lightning bolt icon for extra emphasis.
Custom Gift Icon
This info admonition uses a gift icon for a special announcement.
