About
A labeled aside box for calling out a note or warning inline in documentation or article content.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Callout to your project and fits it to your theme.
Code
How Callout is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import Callout from "@/components/ui/callout";
export default function CalloutDemo() {
return (
<div className="w-full max-w-xl mx-auto p-8 bg-background text-foreground">
<Callout label="Before you start" tone="accent">
<p>Bring something to write with.</p>
</Callout>
</div>
);
}
More by enoughtools
View all
Conversation Bubble
Tool Row
Sidebar
Group Label
Chart