Slide-CN

Callout

Display important messages or alerts to the user.

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 @slide-cn/callout
npx shadcn@latest add @slide-cn/callout
yarn dlx shadcn@latest add @slide-cn/callout
bunx --bun shadcn@latest add @slide-cn/callout

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

Built by Prithvi. Code is available on GitHub

On this page