Deck
KeyPoints slide
Verdict-first points in the content region of the VI canvas: a hairline-ruled grid that picks its own column count from the data (two columns up to four points, three beyond). The author never chooses a layout.
Install
npx shadcn@latest add @alix/keyPointsSlidePreview
Discounts are set at the counter
No one owns the floor price.
There are three versions of every number
Finance, ops and sales each keep their own.
The cash is trapped, not gone
Working capital funds the fix.
The plan needs no new products
Recovery, not invention.
What the diagnostic found
Illustrative
Usage
import { KeyPointsSlide } from "@/components/deck/keyPointsSlide";
<KeyPointsSlide
title="What the diagnostic found"
points={[
{ title: "Discounts are set at the counter", text: "No one owns the floor price." },
{ title: "There are three versions of every number" },
{ title: "The cash is trapped, not gone", text: "Working capital funds the fix." },
{ title: "The plan needs no new products", text: "Recovery, not invention." },
]}
meta={["Illustrative"]}
/>Examples
01
Six points, three columns
Past four points the grid re-lays itself to three columns. The density decision is the renderer's, from the data.
Counter discounts
Unpriced by policy.
Freight recovery
Under-billed on small drops.
Rebate leakage
Accrued, rarely clawed back.
Scrap and rework
Off the shop-floor books.
Overtime drift
Covering planning gaps.
Slow-moving stock
Cash sitting on shelves.
Where the margin leaks
Illustrative
<KeyPointsSlide
title="Where the margin leaks"
points={[
{ title: "Counter discounts", text: "Unpriced by policy." },
{ title: "Freight recovery", text: "Under-billed on small drops." },
{ title: "Rebate leakage", text: "Accrued, rarely clawed back." },
{ title: "Scrap and rework", text: "Off the shop-floor books." },
{ title: "Overtime drift", text: "Covering planning gaps." },
{ title: "Slow-moving stock", text: "Cash sitting on shelves." },
]}
/>02
Titles only
The support line is optional per point. Omit it and the verdicts stand alone as a two-up.
The floor price is set and owned
The run-rate is banked, not just planned
Two things have to be true
<KeyPointsSlide
title="Two things have to be true"
points={[
{ title: "The floor price is set and owned" },
{ title: "The run-rate is banked, not just planned" },
]}
/>When to use it
Use it for
- 2–6 points; three or four is the sweet spot.
- Point titles that carry verdicts, not topics: "The order book is not the problem", never "Order book analysis".
- A short support clause per point where a verdict needs one line of proof.
Reach for something else
- Choosing the column count: the grid re-lays itself from the number of points.
- A cell longer than a sentence. That wants to be its own slide.
- A comparison across shared dimensions. Use TableSlide.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | – | The slide title, on the canvas title row. |
| points | { title: string; text?: string }[] | – | The verdicts, in order. Order is the only sequence; the grid picks two or three columns from the count. text is an optional one-line support clause. |
| meta | string[] | – | Deck chrome / source for the footer meta row. |