Callout

Overview

Add a callout to your slide. You can use it to display success messages, warnings, errors, or general information.

Installation

pnpm dlx shadcn@latest add https://slide-cn.com/r/callout.json

npx shadcn@latest add https://slide-cn.com/r/callout.json

yarn dlx shadcn@latest add https://slide-cn.com/r/callout.json

bunx --bun shadcn@latest add https://slide-cn.com/r/callout.json

Demo

Callouts with different variants

Info

This is an information message to help guide users.

Success

Operation completed successfully!

Warning

Proceed with caution when making this change.

Error

An error occurred while processing your request.

Usage

<Callout title="Info" variant="info">
  This is an information message.
</Callout>

<Callout title="Success" variant="success">
  Operation completed successfully.
</Callout>

<Callout title="Warning" variant="warning">
  Proceed with caution.
</Callout>

<Callout title="Error" variant="error">
  An error occurred.
</Callout>

Reference

Prop

Type