@nanisoft/prism-llms 0.3.0 → 0.5.0

package/dist/md/blocks/hero-01.md

@@ -0,0 +1,90 @@
+# Hero01
+
+A centered marketing hero with an optional eyebrow and one or two actions.
+
+```tsx
+import { Hero01 } from '@nanisoft/prism-ui/blocks/hero-01'
+```
+
+## Overview
+
+Hero01 is the opening band of a marketing page: an optional eyebrow, a headline,
+an optional supporting line, and up to two actions. The `01` suffix is the
+variant ordinal of the hero family, and this one is the centered form.
+
+Every string is a prop. The block ships no eyebrow and no headline, because a
+hero with hardcoded copy makes every consumer inherit a claim about their own
+product.
+
+## Guidelines
+
+### When to use
+
+Use Hero01 as the first band of a page whose purpose is to introduce a product
+or a release. It works when there is one clear headline and one clear next
+action.
+
+### When not to use
+
+Do not use Hero01 inside an application screen. It is a marketing composition,
+and its centered, generous layout competes with the task the screen exists to
+support.
+
+Do not use it twice on one page. A second hero splits the reader's attention and
+leaves two claims competing for the same position.
+
+Do not use it when the headline is really a section heading. Use `SectionHeading`
+inside `Section` instead.
+
+### Best practices
+
+- Pass one primary action and at most one supporting action. More than two
+  actions turn a decision into a menu.
+- Give the first action `default` and the second `outline`. The block already
+  defaults to that order.
+- Set `headingLevel="h1"` when the hero is the page's top-level heading. Use the
+  default `h2` when the page already owns an `h1`.
+- Pass an eyebrow only when it is true and current. It renders nothing when
+  absent, so the honest state is no eyebrow.
+
+### Content guidelines
+
+- Keep the headline under about eight words and let it wrap to two lines at
+  most.
+- Write the headline as an outcome, not a feature name.
+- The description is one sentence and states who the product is for or what
+  changes if the reader continues.
+
+**The centered hero, with a heading level that nests under the page.**
+
+```tsx
+import { Hero01 } from '@nanisoft/prism-ui/blocks/hero-01'
+
+/** The centered hero, with a heading level that nests under the page. */
+export default function Hero01Demo() {
+  return (
+    <Hero01
+      headingLevel="h3"
+      eyebrow="Preview"
+      title="A headline that fits on two lines"
+      description="One or two sentences of supporting copy, so you can judge the measure and the spacing around it."
+      actions={[{ label: 'Primary action' }, { label: 'Secondary', variant: 'outline' }]}
+    />
+  )
+}
+```
+
+## Props
+
+**`eyebrow`** `string` · optional · default: — — Optional label above the headline. Intentionally has no default: an earlier version shipped a hardcoded "Now in open beta" pill, which meant every consumer who installed this block inherited a status badge making a claim about their product. Pass one if you mean it.
+**`title`** `string` · required · default: —
+**`description`** `string` · optional · default: —
+**`actions`** `HeroAction[]` · optional · default: —
+**`align`** `'center' | 'left'` · optional · default: `'center'` — Whether the copy is centered in the band or set flush to the left edge of the container. This is the hero's own alignment and not `SectionHeading`'s, because the two are not the same decision: a left-aligned hero is nearly always the left half of a two-column band with a panel or an instrument beside it, and that column is narrower than the container, so the alignment has to be the hero's before the container can be anything. Three of the four NaniSoft sites compose a left-aligned hero, each beside a panel, and each wrote the alignment by hand because this Block was the centered form only. It has no visual effect on its own, which is the point: it aligns the copy inside whatever width it is given.
+**`headingLevel`** `HeadingLevel` · optional · default: — — Heading level for the title. Defaults to `h2` because a block is composed, not a page: it installs into a consumer's layout and renders inside catalog previews, so the surrounding document already owns the `h1`. A page that uses this block as its top-level heading opts in with `headingLevel="h1"`; a document that already names this section in its own heading passes one level deeper. See `HeadingLevel`.
+
+## Composition
+
+**`exports`** `Hero01` — the public runtime names this Block promises
+**`source`** `packages/ui/src/blocks/hero-01/index.tsx` — the file this Block is defined in
+**`dependencies`** `Button, Section` — the public Prism exports this item composes

package/dist/md/blocks/instrument-panel-01.md

@@ -0,0 +1,109 @@
+# InstrumentPanel01
+
+A bordered panel with a titled bar, a state dot with the words beside it, and a slot for the instrument.
+
+```tsx
+import { InstrumentPanel01 } from '@nanisoft/prism-ui/blocks/instrument-panel-01'
+```
+
+## Overview
+
+InstrumentPanel01 is a bordered panel with a titled bar: the frame a live view of
+something is shown in, beside the copy that explains it.
+
+Three of the four NaniSoft sites compose this as the right half of their hero,
+and each one wrote the same four things by hand: a bordered panel, a bar across
+the top with a small state dot on the left, the name of the view in the middle and
+something on the right, the instrument below, and a footnote under it. Each also
+gave the panel a definite height, because an instrument whose height is whatever
+its content is makes the hero beside it jump while it loads.
+
+**The panel owns the frame, never the instrument.** What goes inside is whatever
+you composed, and that is not a limitation: an instrument is the one thing in this
+system Prism cannot draw, because it is a view of your data and every product's
+data is a different drawing.
+
+## Guidelines
+
+### When to use
+
+Use InstrumentPanel01 where a reader needs to see a view of something and the
+words beside it, and the two are one unit: a hero, a documentation sidebar, a
+dashboard panel.
+
+Use `state` when the content updates on its own, or when a reader would otherwise
+think it does. A panel showing a static snapshot and one showing a live view look
+identical otherwise, and the difference is the whole reason to publish the panel.
+
+### When not to use
+
+Do not use it for a static illustration. A picture with a caption is a `Card` with
+`CardContent`, and a panel bar saying "live" above a still image is a lie.
+
+Do not use it as a modal or a drawer. That is `Dialog`.
+
+Do not use `state="paused"` to mean "loading". A state is a claim about the
+content, and a spinner is a claim about the fetch.
+
+### Best practices
+
+- **The state dot is `aria-hidden` and the words beside it are not.** All three
+  sites that draw a dot write the state in words, and that is the rule: a dot is a
+  shape, and a reader who cannot see `success` has learned nothing from it. The
+  block throws if you pass a state with no `stateLabel`.
+- Use the `actions` slot for a control the panel does not own: a range selector, a
+  pause button, a link to the full view.
+- Give the panel a definite height from your side. The frame does not set one,
+  because the instrument's height is the instrument's business.
+- Use `caption` when the panel stands alone on a page. It is the figure's
+  accessible name and no visible text.
+
+### Content guidelines
+
+- Keep `label` to one line. It is a bar, and a label that wraps is a bar with two
+  lines in it.
+- Write `stateLabel` in the product's own vocabulary: "live view", "snapshot",
+  "paused". Prism does not decide what a system is doing.
+- Use `footnote` for what a reader needs to know before trusting the view: where
+  the data came from, how fresh it is, what is not shown.
+
+**The frame around an instrument: a titled bar, a state, a slot and a footnote.**
+
+```tsx
+import { InstrumentPanel01 } from '@nanisoft/prism-ui/blocks/instrument-panel-01'
+
+/** The frame around an instrument: a titled bar, a state, a slot and a footnote. */
+export default function InstrumentPanel01Demo() {
+  return (
+    <InstrumentPanel01
+      label="The estate, as one graph"
+      state="live"
+      stateLabel="live view"
+      caption="The access graph"
+      footnote="Edges are the paths a person can actually take, not the ones they might."
+      actions={<span className="font-mono">last 60s</span>}
+    >
+      <div className="text-muted-foreground flex h-32 items-center justify-center rounded-lg border border-dashed text-xs">
+        The instrument goes here: a graph, a chart, a canvas, your own markup.
+      </div>
+    </InstrumentPanel01>
+  )
+}
+```
+
+## Props
+
+**`label`** `string` · required · default: — — What the panel shows, in one phrase: "the estate, as one graph", "the loop, live". It is the panel's title and the only visible text the Block adds, so it is required.
+**`state`** `PanelState` · optional · default: `'neutral'` — The state the title bar claims about the content. `neutral` renders a quiet dot and no words; `live` and `paused` require `stateLabel` with them, because the words are what a reader is told and the dot is only what a reader sees.
+**`stateLabel`** `string` · optional · default: — — The words for the state, in the product's own vocabulary. Required whenever `state` is `live` or `paused`: "live view", "paused", "snapshotting" and "verified" are four different claims about four different systems, and none of them is Prism's to choose.
+**`actions`** `ReactNode` · optional · default: — — A slot on the right of the title bar, for a control the panel does not own: a range selector, a pause button, a link to the full view. A slot rather than a prop, because every one of those is application state.
+**`children`** `ReactNode` · required · default: — — The instrument. Any node the consumer composes: a graph, a chart, a table, a canvas, a placeholder in a static export. The Block draws the frame and the bar and nothing else.
+**`footnote`** `ReactNode` · optional · default: — — The line under the instrument, for what a reader needs to know before trusting it: where the data came from, how fresh it is, what is not shown.
+**`caption`** `string` · optional · default: — — A caption for the panel as a whole, published as the frame's accessible name and as no visible text. It is how a reader navigating by figure knows which figure they have landed on.
+**`className`** `string` · optional · default: — — Layout only, exactly as on every Component. Changing a Prism-owned visual property from here is prohibited.
+
+## Composition
+
+**`exports`** `InstrumentPanel01` — the public runtime names this Block promises
+**`source`** `packages/ui/src/blocks/instrument-panel-01/index.tsx` — the file this Block is defined in
+**`dependencies`** `—` — the public Prism exports this item composes

package/dist/md/blocks/logo-strip-01.md

@@ -0,0 +1,97 @@
+# LogoStrip01
+
+A single line of short phrases: the transition band between a hero and the section that follows it.
+
+```tsx
+import { LogoStrip01 } from '@nanisoft/prism-ui/blocks/logo-strip-01'
+```
+
+## Overview
+
+LogoStrip01 is a single line of short items: the transition band between a hero
+and the section that follows it.
+
+All four NaniSoft sites compose this band, immediately after the hero and before
+the first numbered section, and each one wrote it as the same thing: a row of
+three to six short phrases in muted text, with no heading at all. Four
+hand-written strips, four sets of site CSS, and one question each of them
+answered differently - whether the strip is a list, a paragraph with separators,
+or a decorative row of spans.
+
+It is a `ul`, so a screen reader hears how many items there are before it hears
+the first one. That is the whole answer to the question: a strip whose items are
+spans in a `div` is announced as one run of text with no count, and a reader
+deciding whether to keep listening has nothing to weigh.
+
+## Guidelines
+
+### When to use
+
+Use LogoStrip01 immediately after a hero, to say in one quiet line what the hero
+did not have room for.
+
+Use it for three to eight short phrases. Fewer is a sentence, and more is a
+paragraph.
+
+### When not to use
+
+Do not use it for logos. This block takes strings and renders them as text, at the
+same size as the body. A row of marks is a `ProductGrid01` and a row of images is
+neither of these.
+
+Do not use it as a marquee. **The strip does not move.** A band of items that
+slides is an entrance animation, and this system has none: motion is state
+feedback only. What the four sites wanted from their strips was a second, quieter
+statement of what the product is, and repeating the type does that without
+anything moving.
+
+Do not use it with more than about eight items. It wraps onto three lines on a
+phone and stops being a band; a longer set belongs in a `StackGrid01`.
+
+### Best practices
+
+- Give it a `label`, which is required. It is the accessible name and no visible
+  text, so a reader navigating by list knows what they have landed on, and the
+  word is yours because a Block that ships no copy ships no reader-facing copy.
+- Keep every item to one or two words. The strip is scanned, not read.
+- Place it once per page, between the hero and the first section.
+
+### Content guidelines
+
+- Write items as names, not as claims. A strip of adjectives is a slogan.
+- Keep the register even across the items. One long item among four short ones
+  makes the long one the only one read.
+- Do not repeat the hero's own words. The strip is the second statement, not the
+  first one again.
+
+**The transition band: one line of short phrases, as a list.**
+
+```tsx
+import { LogoStrip01 } from '@nanisoft/prism-ui/blocks/logo-strip-01'
+
+/** The transition band: one line of short phrases, as a list. */
+export default function LogoStrip01Demo() {
+  return (
+    <LogoStrip01
+      label="Data sources"
+      items={['Fyers v3', 'yfinance', 'nselib / nse-xbrl', 'NSE filings']}
+    />
+  )
+}
+```
+
+## Props
+
+**`items`** `readonly LogoStripItem[]` · required · default: — — The items, in the order a reader should meet them. Order is the caller's because it is a claim about which item matters first.
+**`label`** `string` · required · default: — — The strip's accessible name, for a strip that is not inside a region the reader can already name. It is rendered as the list's name and as no visible text, because the items are the visible content and a heading above them would be a heading about a heading. It is required because it is a word a reader hears. A Block that ships no copy ships no reader-facing copy either, so "Highlights" is not this Block's to choose: on one site the strip is a list of data sources and on another it is a list of capabilities, and the word that says which is the caller's.
+**`eyebrow`** `string` · optional · default: — — Optional label above the section title. See the No-Default-Eyebrow Rule.
+**`title`** `string` · optional · default: — — The section title. Omit it for a strip composed under its own heading.
+**`description`** `string` · optional · default: — — One or two sentences under the title.
+**`headingLevel`** `HeadingLevel` · optional · default: — — Heading level for the section title. See `HeadingLevel`.
+**`className`** `string` · optional · default: — — Layout only, exactly as on every Component. Changing a Prism-owned visual property from here is prohibited.
+
+## Composition
+
+**`exports`** `LogoStrip01` — the public runtime names this Block promises
+**`source`** `packages/ui/src/blocks/logo-strip-01/index.tsx` — the file this Block is defined in
+**`dependencies`** `Section` — the public Prism exports this item composes

package/dist/md/blocks/note-grid-01.md

@@ -0,0 +1,102 @@
+# NoteGrid01
+
+A grid of short points: a title and a sentence or two, with no tile and no icon.
+
+```tsx
+import { NoteGrid01 } from '@nanisoft/prism-ui/blocks/note-grid-01'
+```
+
+## Overview
+
+NoteGrid01 is a grid of short points: a title and a sentence or two, on a hairline
+above each one, with no tile and no icon.
+
+Three of the four NaniSoft sites compose this section, immediately after the
+process rail and before the next numbered band, and each one drew it as the same
+thing: a multi-column set of short points, each a bold title and a short
+paragraph, with no card and no icon. All three also composed it *twice* - once
+under the rail and once under a different section - so three hand-written grids
+became six, each with its own column count and its own spacing.
+
+It is a `dl` rather than a grid of `div`s, because each note is a term and its
+explanation and a definition list is what says so.
+
+## Guidelines
+
+### When to use
+
+Use NoteGrid01 where a section needs to make several points that each need a
+sentence, and the points are peers.
+
+Use it where a card would be too tight for the words. That is the whole
+difference from `FeatureGrid01`: a card carries a title and a fragment, and a
+note carries a title and a paragraph.
+
+### When not to use
+
+Do not use it for features. `FeatureGrid01` is for that, with its icon tiles. A
+note with an icon in front of it reads as a feature and is read as one, and a
+section of twelve features is a page that argues rather than explains.
+
+Do not use it where one of the points is much longer than the others. The grid is
+scanned by row, and one long body makes its own row the only one read.
+
+### Best practices
+
+- Keep a body to three lines at the widest viewport. Past that the detail belongs
+  in the section's `description`, where it applies to the set.
+- Keep every title to one line. The grid is scanned down its left edge, and a
+  title that wraps costs every other row its alignment.
+- Four notes is the comfortable case. Six is the limit at the largest viewport.
+- Use `caption` for the sentence that qualifies the set. It is the honest place
+  for "and here is what it does not do".
+
+### Content guidelines
+
+- Write a title as a short noun phrase, not a sentence.
+- Write a body as one or two sentences that stand alone. A reader may read one row
+  and stop.
+- Do not start every title with the same word. Six titles that all begin "One" are
+  a list of the same claim.
+
+**Three points, each a title and a sentence, on a hairline and no tile.**
+
+```tsx
+import { NoteGrid01 } from '@nanisoft/prism-ui/blocks/note-grid-01'
+
+/** Three points, each a title and a sentence, on a hairline and no tile. */
+export default function NoteGrid01Demo() {
+  return (
+    <NoteGrid01
+      headingLevel="h3"
+      eyebrow="Preview"
+      title="What the feed guarantees"
+      description="Three properties, and the test that holds each one."
+      notes={[
+        { title: 'One canonical timestamp', body: 'Every row carries the same clock, set once at capture.' },
+        { title: 'One symbol form', body: 'The same instrument is spelled the same way in every table.' },
+        { title: 'A pinned column list', body: 'Held by a test rather than by a convention nobody reads.' },
+      ]}
+    />
+  )
+}
+```
+
+## Props
+
+**`eyebrow`** `string` · optional · default: — — Optional label above the section title. See the No-Default-Eyebrow Rule.
+**`title`** `string` · optional · default: — — The section title. Omit it for a grid composed under its own heading.
+**`description`** `string` · optional · default: — — One or two sentences under the title.
+**`notes`** `readonly NoteGrid01Note[]` · required · default: — — The notes, in the order a reader should meet them. Order is the caller's because it is a claim about which point matters first.
+**`caption`** `string` · optional · default: — — The line under the grid, for the sentence that qualifies it: what the points do not cover, or where to read more.
+**`headingLevel`** `HeadingLevel` · optional · default: — — Heading level for the section title. See `HeadingLevel`.
+**`body`** `string` · required · default: — — One or two sentences about the point.
+**`children`** `[title ? (_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-12" })) : null, _jsx("dl", { "data-slot": "note-grid", className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-3", children: notes.map((note) => (_jsxs("div", { "data-slot": "note-grid-note", className: "border-border flex flex-col gap-2 border-t pt-4", children: [_jsx("dt", { className: "text-sm font-semibold", children: note.title }), _jsx("dd", { className: "text-muted-foreground text-pretty text-sm", children: note.body })] }, note.title))) }), caption ? _jsx("p", { className: "text-muted-foreground mt-6 text-pretty text-sm", children: caption }) : null]` · required · default: —
+**`as`** `headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-12"` · required · default: —
+**`className`** `"text-sm font-semibold", children: note.title` · required · default: —
+
+## Composition
+
+**`exports`** `NoteGrid01` — the public runtime names this Block promises
+**`source`** `packages/ui/src/blocks/note-grid-01/index.tsx` — the file this Block is defined in
+**`dependencies`** `Section` — the public Prism exports this item composes

package/dist/md/blocks/page-header-01.md

@@ -0,0 +1,97 @@
+# PageHeader01
+
+A page title band with a breadcrumb trail, a supporting line and a row of actions.
+
+```tsx
+import { PageHeader01 } from '@nanisoft/prism-ui/blocks/page-header-01'
+```
+
+## Overview
+
+PageHeader01 is the title band at the top of an application screen: a
+breadcrumb trail, a row of actions, the page title and one supporting line,
+closed by a hairline rule.
+
+The block composes these components:
+
+| Part | Component | Role |
+| --- | --- | --- |
+| Trail | Breadcrumb | the ancestor path, ending on the current page |
+| Actions | Button | one primary action and supporting actions |
+| Title | Typography | the page heading and its supporting line |
+| Rule | Separator | closes the band before the working content |
+
+Every step and action is a prop. The trail renders native anchors, so the
+consumer owns the destination; a router link or a stateful control goes through
+`actionsSlot` instead.
+
+## Guidelines
+
+### When to use
+
+Use PageHeader01 at the top of a page whose content sits under the app shell. It
+works when the page has one name, one short description and a small set of
+actions that belong to the page rather than to a single row.
+
+### When not to use
+
+Do not use it as a section heading inside a page. It carries the page title and
+a rule that closes a band, so using it mid-page splits one screen into two.
+
+Do not use it in a marketing page. A hero introduces a product; a page header
+orients a returning user, and the two carry different weight.
+
+### Best practices
+
+- Set `headingLevel="h1"` on a real page. The default `h2` suits a header
+  composed under a heading the document already owns.
+- Keep the trail to the ancestors plus the current page. Repeating the title as
+  the last step reads as noise.
+- Pass one primary action and at most two supporting ones, and put a link or a
+  menu in `actionsSlot` when it needs its own router or state.
+
+### Content guidelines
+
+- A breadcrumb label is the destination's display name: "Projects", "Settings".
+- The title names the screen, not the action: "Overview", not "View overview".
+
+**A page header with a breadcrumb trail and two actions.**
+
+```tsx
+import { PageHeader01 } from '@nanisoft/prism-ui/blocks/page-header-01'
+
+/** A page header with a breadcrumb trail and two actions. */
+export default function PageHeader01Demo() {
+  return (
+    <PageHeader01
+      headingLevel="h3"
+      breadcrumbs={[
+        { label: 'Workspaces', href: '#workspaces' },
+        { label: 'Northwind', href: '#northwind' },
+        { label: 'Overview' },
+      ]}
+      title="Overview"
+      description="Deployments, usage and the people on this workspace."
+      actions={[
+        { label: 'Share' },
+        { label: 'New deployment', variant: 'outline' },
+      ]}
+    />
+  )
+}
+```
+
+## Props
+
+**`breadcrumbs`** `PageHeaderCrumb[]` · optional · default: — — The trail above the title. The final item always renders as the current page, whether or not it carries an `href`.
+**`title`** `ReactNode` · required · default: — — The page title.
+**`description`** `ReactNode` · optional · default: — — One supporting line under the title.
+**`actions`** `PageHeaderAction[]` · optional · default: — — Declarative actions rendered as Prism Buttons. Use `actionsSlot` for a control that needs its own behaviour, such as a router link or a menu.
+**`actionsSlot`** `ReactNode` · optional · default: — — A slot for consumer-provided controls on the action row.
+**`headingLevel`** `HeadingElement` · optional · default: — — The heading element for the title. Defaults to `h2` because a block is composed; a page whose own document outline this header opens passes `h1`. See `HeadingElement`.
+
+## Composition
+
+**`exports`** `PageHeader01` — the public runtime names this Block promises
+**`source`** `packages/ui/src/blocks/page-header-01/index.tsx` — the file this Block is defined in
+**`dependencies`** `Breadcrumb, Button, Separator` — the public Prism exports this item composes

package/dist/md/blocks/pricing-01.md

@@ -0,0 +1,91 @@
+# Pricing01
+
+A plan comparison with one highlighted tier.
+
+```tsx
+import { Pricing01 } from '@nanisoft/prism-ui/blocks/pricing-01'
+```
+
+## Overview
+
+Pricing01 is a plan comparison: up to three plans side by side, one of which may
+be featured with a primary border, a filled action and a badge. Each plan
+carries a name, a price, an optional period, an optional body, a feature list
+and an action label.
+
+Every string is a prop, including the prices and the call to action. The block
+previously hardcoded a price set and shipped a heading above a title that
+already said the same thing.
+
+## Guidelines
+
+### When to use
+
+Use Pricing01 when a reader compares a small, fixed number of plans on the same
+features. It lays the plans out for comparison and lifts the recommended one.
+
+### When not to use
+
+Do not use it for a usage-based price or a quote. A table of fixed prices cannot
+represent a metered plan honestly.
+
+Do not feature more than one plan. Two highlighted plans read as no
+recommendation at all.
+
+Do not use the block on a dense application screen. It is a marketing
+composition with a lot of vertical space.
+
+### Best practices
+
+- Put the recommended plan in the middle when there are three, so the eye lands
+  on it after the first.
+- Keep the feature lists the same length across plans. Uneven lists make the
+  shorter plan look thinner than it is.
+- State the period on every price, or on none. A period on one plan and not
+  another invites a wrong total.
+- Pass a badge on the featured plan, or none at all. The block ships no badge
+  word: a plan that is featured and unnamed is the honest state, and a block
+  that hardcoded "Popular" would make that claim for every consumer.
+
+### Content guidelines
+
+- A plan name is one word where possible and takes sentence case.
+- Write a feature as an outcome, not a limit: "Unlimited projects" reads better
+  than "Projects: unlimited".
+- A call to action is verb-first and sentence case: "Choose Team", "Contact
+  sales".
+
+**The plan comparison, with the middle plan featured.**
+
+```tsx
+import { Pricing01 } from '@nanisoft/prism-ui/blocks/pricing-01'
+
+/** The plan comparison, with the middle plan featured. */
+export default function Pricing01Demo() {
+  return (
+    <Pricing01
+      headingLevel="h3"
+      title="Section heading"
+      plans={[
+        { name: 'First plan', price: '$0', period: ' / month', body: 'One line on who it is for.', features: ['First included line', 'Second included line', 'Third included line'], cta: 'Choose' },
+        { name: 'Second plan', price: '$24', period: ' / month', body: 'One line on who it is for.', features: ['Everything in the first plan', 'One extra line', 'Another extra line'], cta: 'Choose', featured: true, badge: 'Most chosen' },
+        { name: 'Third plan', price: '$68', period: ' / month', body: 'One line on who it is for.', features: ['Everything in the second plan', 'One extra line', 'Another extra line'], cta: 'Choose' },
+      ]}
+    />
+  )
+}
+```
+
+## Props
+
+**`eyebrow`** `string` · optional · default: —
+**`title`** `string` · optional · default: —
+**`description`** `string` · optional · default: —
+**`plans`** `Plan[]` · required · default: —
+**`headingLevel`** `HeadingLevel` · optional · default: — — Heading level for the section title. See `HeadingLevel`.
+
+## Composition
+
+**`exports`** `Pricing01` — the public runtime names this Block promises
+**`source`** `packages/ui/src/blocks/pricing-01/index.tsx` — the file this Block is defined in
+**`dependencies`** `Badge, Button, Card, Section` — the public Prism exports this item composes