Note: This project is still in development and has not been publicly released. Coming soon.
Docs
Admonition
Admonition

A versatile callout component for displaying important information with different severity levels and custom styling options.

64 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"
2
3export 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

PropTypeDefaultDescription
type"note" | "tip" | "info" | "warning" | "danger" | "success" | "caution""note"Visual style and semantic meaning
titlestringundefinedOptional heading text
childrenReactNode-Content body (required)
iconComponentType<{className?: string}>undefinedCustom icon override
classNamestring""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...