Registry
Callout
An emphasized aside with tone variants.
<Callout>Slides are files — the repo is the deck.</Callout>
<Callout tone="primary">Registry items are copied as source. Edit them.</Callout>
<Callout tone="warning">Filename ordering is the contract: 01, 02, 03…</Callout>Installation
camp add calloutOr with any shadcn-compatible CLI:
bunx shadcn@latest add https://campfire-deck.vercel.app/r/callout.jsonCopy the source into components/callout.tsx. It imports cn from
@/lib/utils — scaffolded by camp init, or camp add utils:
import type { ComponentProps } from "react";
import { cn } from "@/lib/utils";
export type CalloutTone = "default" | "primary" | "warning";
const toneStyles: Record<CalloutTone, string> = {
default: "border-foreground/15 bg-foreground/[0.04]",
primary: "border-primary/40 bg-primary/10",
warning: "border-amber-500/40 bg-amber-500/10",
};
export type CalloutProps = ComponentProps<"aside"> & {
/** Visual emphasis of the aside. */
tone?: CalloutTone;
};
/** An emphasized aside with tone variants. */
export default function Callout({
tone = "default",
className,
...props
}: CalloutProps) {
return (
<aside
className={cn(
"rounded-xl border-2 px-8 py-6 text-2xl leading-relaxed",
toneStyles[tone],
className
)}
data-slot="callout"
data-tone={tone}
{...props}
/>
);
}Usage
---
title: One thing to remember
---
<Callout tone="primary">
Registry items are copied as source. Edit them.
</Callout>Tones live in the component's toneStyles map — since the file is yours,
add brand-specific tones by editing it. The active tone is exposed as
data-tone, so theme.css can restyle variants globally:
[data-slot="callout"][data-tone="warning"] {
border-style: dashed;
}API Reference
Extends ComponentProps<"aside"> — native props are forwarded and
className is merged last. Exposes data-slot="callout" and data-tone.
Prop
Type