Callout

Documentation and examples for the Callout component.

Preview

Title for callout

A small info msg in green

Properties

PropTypeDefaultDescription
titlestring-The heading of the callout.
color"red" | "blue" | "green" | "yellow""blue"The visual theme.

Usage

Follow these steps to add and use Callout.

1

Create next app (skip if you already have setup a next app)

terminal
npx create-next-app@latest --yes
2

Install

terminal
npx modui-uikit@latest add callout
3

Implement

typescript
import { Callout } from '@/components/ui/callout'
  
  export default function Example() {
    return (
      <Callout title="Info callout" color="blue">
        This is an important piece of information.
      </Callout>
    )
  }