Aside

A margin-note callout for parenthetical content — caveats, "by the way" notes, historical asides. Three semantic tones (note, info, warning) drive a colored left edge and a colored heading so the reader can tell at a glance whether an aside is critical or optional.

Installation

npx shadcn@latest add https://craftbits.dev/r/aside.json

Usage

import { Aside } from "@craft-bits/core";
 
<Aside tone="note">
  Bahdanau attention behaves differently at long context lengths.
</Aside>
 
<Aside tone="warning">
  Without the 1/√d scale factor, softmax saturates and gradients vanish.
</Aside>

Custom label:

<Aside tone="note" label="Historical">
  The dot-product attention scoring used here predates "Attention is All You Need" by several years.
</Aside>

Anatomy

• Tone — note (neutral grey edge), info (blue edge), warning (amber edge). The tone drives both the left rail color and the heading color so the cue is reinforced.
• Label — defaults to the tone name (Note / Info / Warning). Override with label for a custom heading like "Historical" or "Caveat", or pass '' to hide the heading entirely.
• Body — any ReactNode. Wraps with [text-wrap:pretty] for a balanced last line.

Props

Accessibility

• Renders as <aside role="note"> so assistive tech announces it as supplementary content.
• The colored left edge is decorative — the tone is also communicated by the heading label so color is never the only signal.
• No motion to suppress.

Credits

• Extracted from: craftingattention (app/src/lessons/primitives/edu/Aside.tsx).