Callout

Adds a contextual note to running copy. 1px frame, square corners, no accent bar.

Preview

Fixed fee. The number on the cover is the number on the invoice.

In action

Note

Fixed fee. The number on the cover is the number on the invoice.

When to use

Use it for

A note inside running copy that deserves a frame: a term, a caveat, a definition.
A bold lead-in and one or two sentences.

Not for

Status and warnings; use Alert.
Stacking several in a row.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Callout } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/callout.

2. Vendor the source

npx @noorddev/vlak-cli add callout

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/callout.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { Callout } from "@noorddev/vlak-react";

<Callout>
  <p><strong>Fixed fee.</strong> The number on the cover is the number on the invoice.</p>
</Callout>

Props

Callout

Paper field, 1px hairline on all sides. Not rounded. No left bar.

Also accepts HTMLAttributes<HTMLDivElement>.

Accessibility

A plain <div> in the reading order; add role="note" and an aria-label when it should be announced as an aside.

Markup

<div class="rs-callout"><p><strong>Fixed fee.</strong> The number on the cover is the number on the invoice.</p></div>

Classes

.rs-callout