Callout

An inline notice box — icon, optional heading, and description. Not a shadcn component: copied by hand, no CLI registry entry on the source platform either.

Server-safe

app/components/ui/callout.tsx

Installation

Not in shadcn's registry on the source platform (copied by hand there) — this bundle's own CLI ships it anyway:

npx chandra-asri-ui add callout

Example

Note

This is a default callout — the size most commonly used for inline page notices.

Heads up

A smaller, more compact variant for tighter layouts.

Important

A larger variant for when the notice needs more visual weight.

import { Callout } from "@/app/components/ui/callout";
import { Info } from "lucide-react";

export function CalloutDemo() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Callout variant="default" icon={<Info />} heading="Note">
        This is a default callout — the size most commonly used for inline page
        notices.
      </Callout>
      <Callout variant="small" icon={<Info />} heading="Heads up">
        A smaller, more compact variant for tighter layouts.
      </Callout>
      <Callout variant="big" icon={<Info />} heading="Important">
        A larger variant for when the notice needs more visual weight.
      </Callout>
    </div>
  );
}

About the Color

Every color here — background #E0F2F1, text #00796B— is a hardcoded teal that doesn't correspond to any token in this bundle's brand palette. It's reproduced literally here rather than mapped to an approximate existing color, since guessing a close-enough brand token would be less honest than the source's own unregistered one-off. Register it as a real token (e.g. info-*) before reusing Callout elsewhere if this color is meant to stick around.

Source

import { cn } from "@/lib/utils";
import { cva, type VariantProps } from "class-variance-authority";
import type { HTMLAttributes, ReactNode } from "react";

/**
 * Not a shadcn component — copied by hand from the source platform (no CLI
 * registry entry there either). Pure display, `cva`-based, no Radix.
 *
 * Every color here (`#E0F2F1` background, `#00796B` text) is a hardcoded
 * teal that doesn't correspond to any token in this bundle's brand
 * palette — reproduced literally rather than mapped to an approximate
 * existing color, since guessing a "close enough" brand token would be
 * less honest than the source's own unregistered one-off. Register it as
 * a real token (e.g. `info-*`) before reusing Callout elsewhere if this
 * color is meant to stick around.
 */
const calloutBoxVariants = cva(
  "flex flex-col gap-4 bg-[#E0F2F1] text-left text-[#00796B] md:flex-row",
  {
    variants: {
      variant: {
        default: "rounded-[6px] p-4",
        small: "rounded-[4px] p-3",
        big: "rounded-[6px] p-4",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
);

const calloutIconVariants = cva("shrink-0", {
  variants: {
    variant: {
      default: "text-3xl",
      small: "text-2xl",
      big: "text-[32px]",
    },
  },
  defaultVariants: {
    variant: "default",
  },
});

const calloutTitleVariants = cva("font-bold", {
  variants: {
    variant: {
      default: "text-[20px] leading-[28px]",
      small: "font-title text-[14px] leading-[16px]",
      big: "text-[20px] leading-[28px]",
    },
  },
  defaultVariants: {
    variant: "default",
  },
});

const calloutDescriptionVariants = cva("", {
  variants: {
    variant: {
      default: "text-[18px] leading-[30px]",
      small: "text-[10px] leading-[12px]",
      big: "text-lg leading-[30px]",
    },
  },
  defaultVariants: {
    variant: "default",
  },
});

export interface CalloutProps
  extends
    HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof calloutBoxVariants> {
  icon?: ReactNode;
  heading?: string;
}

export function Callout({
  className,
  variant,
  icon,
  heading,
  children,
  ...props
}: CalloutProps) {
  return (
    <div className={cn(calloutBoxVariants({ variant }), className)} {...props}>
      {icon && (
        <span className={cn(calloutIconVariants({ variant }))}>{icon}</span>
      )}
      <div>
        {heading && (
          <p className={cn(calloutTitleVariants({ variant }))}>{heading}</p>
        )}
        <div className={cn(calloutDescriptionVariants({ variant }))}>
          {children}
        </div>
      </div>
    </div>
  );
}