Admonition

PreviousNext

Highlight side content and alerts with semantic colors and icons.

Note
This is a note admonition. Use it to provide additional information that users should be aware of.

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/admonition.json

Usage

import { Admonition } from "@/components/ui/admonition"
 
export default function Example() {
  return (
    <Admonition type="warning" title="Important Notice">
      This is a warning message that users should pay attention to.
    </Admonition>
  )
}

Examples

Custom Icon

Override the default semantic icon by passing a Lucide React component (or any SVG component) to the icon prop.

Component admonition-custom-icon not found in registry.

Adomition Types

Use different types of admonitions to guide users through important information and improve documentation clarity:

Note
This is a note admonition. Use it to provide additional information that users should be aware of.

API Reference

PropTypeDefaultDescription
type"note" | "tip" | "info" | "warning" | "danger" | "success" | "caution""note"The type of admonition determining color and icon
titlestring-Optional title text displayed above the content
childrenReactNode-The content to display inside the admonition
iconReact.ComponentType -Custom icon component to override the default type icon
classNamestring-Additional CSS classes