Toolkit · 7 components

The components I write with

Every piece here is MDX, written with a small set of React components. These are the real ones, rendered live, with the line of MDX that produces each.

Subnote
<Subnote note="…">
A definition or aside that opens on hover, focus or tap.
Agents are tested by turning their findings into .
```
<Subnote note="Tests that lock in behaviour that already works.">regression tests</Subnote>
```
Callout
<Callout variant>
Sets a passage apart: a note, a key takeaway, or an aside.
Key takeaway
We’re getting very good at making agents do things. The next step is rethinking how we work alongside them.
```
<Callout variant="takeaway">
  We're getting very good at making agents do things.
</Callout>
```
StatRow
<StatRow> + <Stat>
Two or three numbers that make the argument on their own.
+152%more pull requests
+27%more deliverables
```
<StatRow>
  <Stat value="+152%" label="more pull requests" />
  <Stat value="+27%" label="more deliverables" />
</StatRow>
```
LinkCard
<LinkCard>
A quiet link preview for a source worth leaving the page for.
Towards Intent-based User InterfacesCharting the design space of intent-AI interactions across task types.arXiv
```
<LinkCard
  href="https://arxiv.org/abs/2404.18196"
  title="Towards Intent-based User Interfaces"
  site="arXiv"
/>
```
Quote
<Quote>
A pull quote that slows the reader down.
Writing code is cheap now. Deciding what to build is the real work.
```
<Quote>Writing code is cheap now.</Quote>
```
Citation
<Citation n source href>
A numbered source marker that reveals the reference on hover or tap.
Self-speculation decodes about four times faster on the same hardware.
```
<Citation n={1} source="NVIDIA, Nemotron-Labs Diffusion" href="…" />
```
Figure
<Figure>
An image with a caption. Without a src it holds the space with a placeholder.
Diagram placeholder
A slot waiting for its diagram
```
<Figure src="…" alt="…" caption="…" ratio="landscape" />
```

Subnote

Callout

StatRow

LinkCard

Quote

Citation

Figure