Skip to content
GitHub

Callout

Displays a callout for user attention.

import { Callout } from "@/components/ui/pxl/callout";


export default function CalloutDemo() {
  return (
    <div className="max-w-md">
      <Callout variant="info" title="Heads up!">
        You can add components and dependencies to your app using the cli.
      </Callout>
    </div>
  );
}

The Callout component is a styled and customized version of the Alert component including additional features such as collapsible content.

Installation

Section titled “Installation”
pnpm dlx shadcn@latest add pxl-ui/registry/callout

Usage

Section titled “Usage”
import { Callout } from "@/components/ui/pxl/callout"
<Callout callout="info" title="Heads up!">
  You can add components and dependencies to your app using the cli.
</Callout>

Alert vs Callout

Section titled “Alert vs Callout”

Use the Callout if you need to display admonitions/callouts for example from Markdown sources. Use the Alert component if you need deeper control or advanced customization.

Collapsible

Section titled “Collapsible”

Use the collapsible and collapsed props to make the callout collapsible.

import { Callout } from "@/components/ui/pxl/callout";


export default function CalloutCollapsibleExample() {
  return (
    <div className="max-w-md w-full">
      <Callout variant="info" title="Are callouts foldable?" collapsible>
        Yes! In a foldable callout, the contents are hidden when the callout is collapsed.
      </Callout>
    </div>
  );
}

Types

Section titled “Types”

Use the callout prop to change the callout styles.

Aliases: summary, tldr

Aliases: hint, important

Aliases: check, done

Aliases: help, faq

Aliases: caution, attention

Aliases: fail, missing

Aliases: error

Aliases: cite

import { Callout } from "@/components/ui/pxl/callout";
import { Separator } from "@/components/ui/pxl/separator";


export default function CalloutTypesExample() {
  return (
    <div className="flex flex-col gap-3 max-w-md w-full">
      <div>
        <Callout variant="note" collapsible>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Callout>
        <Separator border="dashed" className="mt-3"  />
      </div>
      <div>
        <Callout variant="abstract" collapsible>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Callout>


        <p className="typeset mt-2">
          Aliases: <code>summary</code>, <code>tldr</code>
        </p>


        <Separator border="dashed" className="mt-3"  />
      </div>
      <div>
        <Callout variant="info" collapsible>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Callout>


        <Separator border="dashed" className="mt-3"  />
      </div>
      <div>
        <Callout variant="todo" collapsible>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Callout>


        <Separator border="dashed" className="mt-3"  />
      </div>
      <div>
        <Callout variant="tip" collapsible>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Callout>


        <p className="typeset mt-2">
          Aliases: <code>hint</code>, <code>important</code>
        </p>


        <Separator border="dashed" className="mt-3"  />
      </div>
      <div>
        <Callout variant="success" collapsible>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Callout>


        <p className="typeset mt-2">
          Aliases: <code>check</code>, <code>done</code>
        </p>


        <Separator border="dashed" className="mt-3"  />
      </div>
      <div>
        <Callout variant="question" collapsible>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Callout>


        <p className="typeset mt-2">
          Aliases: <code>help</code>, <code>faq</code>
        </p>


        <Separator border="dashed" className="mt-3"  />
      </div>
      <div>
        <Callout variant="warning" collapsible>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Callout>


        <p className="typeset mt-2">
          Aliases: <code>caution</code>, <code>attention</code>
        </p>


        <Separator border="dashed" className="mt-3"  />
      </div>
      <div>
        <Callout variant="failure" collapsible>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Callout>


        <p className="typeset mt-2">
          Aliases: <code>fail</code>, <code>missing</code>
        </p>


        <Separator border="dashed" className="mt-3"  />
      </div>
      <div>
        <Callout variant="danger" collapsible>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Callout>


        <p className="typeset mt-2">
          Aliases: <code>error</code>
        </p>


        <Separator border="dashed" className="mt-3"  />
      </div>
      <div>
        <Callout variant="bug" collapsible>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Callout>


        <Separator border="dashed" className="mt-3"  />
      </div>
      <div>
        <Callout variant="example" collapsible>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Callout>


        <Separator border="dashed" className="mt-3"  />
      </div>
      <div>
        <Callout variant="quote" collapsible>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Callout>


        <p className="typeset mt-2">
          Aliases: <code>cite</code>
        </p>
      </div>
    </div>
  );
}