Docs
Admonition
Admonition
A versatile callout component for displaying important information with different severity levels and custom styling options.
57 views
5 downloads
Based onScalar Docs
Loading...
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
1import Admonition from "@/registry/components/admonition"23export function Component() {4 return (5 <Admonition type="warning" title="Important Notice">6 This is an important message that users should pay attention to.7 </Admonition>8 )9}
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.
Loading...
Custom Icons
Override default icons with custom Lucide React components for specialized use cases.
Loading...
