craftbits*

Key Insight

The "aha" callout. Use it sparingly — once or twice per lesson — for the single line a reader would underline if they were holding a pen. Tinted --cb-accent-muted background, thick --cb-accent left edge, and an iconized accent label so the eye lands on it during a skim.

Preview

Installation

npx shadcn@latest add https://craftbits.dev/r/key-insight.json

Usage

import { KeyInsight } from "@craft-bits/core";
 
<KeyInsight>
  Attention is just a weighted average. Every other piece of the transformer
  machinery is in service of computing the weights well.
</KeyInsight>

Custom icon and label:

import { Lightbulb } from "lucide-react";
 
<KeyInsight icon={<Lightbulb size={10} />} label="Takeaway">
  Gradients flow backwards through the same graph the activations flowed forwards through.
</KeyInsight>

Anatomy

  • Tinted background — a soft --cb-accent-muted fill that distinguishes the box from surrounding prose at a glance.
  • Thick left edge — a 3px --cb-accent rail (thicker than Aside or Definition) — the "this one matters" marker.
  • Icon badge — a small circular badge holds the icon (default !). Pass any lucide-react icon to override.
  • Label — defaults to Key insight. Override with label="Takeaway" etc., or pass '' to drop the heading entirely.

Props

PropTypeDefaultDescription
iconReactNode'!'Leading mark inside the accent badge.
labelstring'Key insight'Heading text. Pass '' to hide.
childrenReactNoderequiredThe insight body.
classNamestring—Merged onto the root via cn().

Accessibility

  • Renders as <aside role="note"> so assistive tech announces it as supplementary content.
  • The icon and badge are aria-hidden="true" so only the visible label + body are read aloud.
  • Accent + accent-muted color combinations meet WCAG AA contrast in the default theme; verify with custom palettes.

Credits

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