Admonition

Cards 20

About

Here is Admonition component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Admonition to your project and fits it to your theme.

Code

How Admonition is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import React from "react"
import Admonition from "@/components/ui/admonition"
import { Gift, Heart, Star, Zap } from "lucide-react"

export default function AdmonitionCustomDemo() {
  return (
    <div className="w-full max-w-2xl mx-auto space-y-4 p-4">
      <Admonition type="tip" title="Custom Heart Icon" icon={Heart}>
        This admonition uses a custom heart icon instead of the default tip
        icon.
      </Admonition>

      <Admonition type="success" title="Custom Star Icon" icon={Star}>
        This success admonition features a custom star icon.
      </Admonition>

      <Admonition type="warning" title="Custom Lightning Icon" icon={Zap}>
        This warning uses a lightning bolt icon for extra emphasis.
      </Admonition>

      <Admonition type="info" title="Custom Gift Icon" icon={Gift}>
        This info admonition uses a gift icon for a special announcement.
      </Admonition>
    </div>
  )
}