Content blocks

Callout

The callout: an emoji and text in a rounded, tinted box. Defaults to 💡 on gray; any block color works.

💡

Callouts draw attention to a tip or warning.

Usage

Use Callout to highlight a tip, note or warning inside page content.
Pick an emoji and block color that match the message (for example red for warnings).
Keep callouts short; one or two per section is enough.
Don’t use Callout for system feedback in the app UI; use Alert or Toast instead.

Installation

Install the package (React 19):

terminal

npm install @krackedui/motion

terminal

pnpm add @krackedui/motion

terminal

yarn add @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx

import '@krackedui/motion/styles.css';

Use it anywhere inside your app's `<Theme>` (see Installation):

/src/CalloutExample.tsx

import { BlockContent, Callout, rt } from '@krackedui/motion';

export function CalloutExample() {
  return (
    <BlockContent>
      <Callout text={rt('Callouts draw attention to a tip or warning.')} />
    </BlockContent>
  );
}