introduction
register the parent once in mdx-components.tsx. the .mdx tab is the framed figure — copy it into notion, linear, a readme. the .tsx tab is the react. wrap the same content in the parent when you want it live.
installation covers the cli and mdx-components. examples are short write-ups with two figures each. for agents is the skill. comark and knap render the same graphs from plain .md.
the mdx tab is the drawing: dashed frame, title, glyphs. copy that into notion or a readme and the figure is still there. react is the other tab. register the parent once to render it live.
install
the cli copies a registry item into your repo. you can also copy the files from github.
command
components
38 total
[ content ]
markdown children. callouts, quotes, steps, a shell, a release.
- calloutnew
- An aside between paragraphs — a caveat, a tip, a warning. The body is Markdown. A quote is Quote.
- quotenew
- Someone else's sentence, with a name under it. Your own caveat is Callout.
- stepsnew
- A numbered procedure. Write an ordered list; bold the current step, italic the next. Dated events are Timeline. A punch list is Check.
- terminalnew
- A shell session. `$` is a command, `#` a comment, `✓` a pass. Source code stays in a fence. A file tree is Tree.
- changelognew
- One release. A markdown list: `added:`, `changed:`, `fixed:`, `removed:`. Numeric deltas are Diff.
1. **Register it**
Export it from mdx-components.- added: Callout, Steps, Terminal[ diagrams ]
paths, trees, timelines, schedules. written as children.
- flow
- A process on a dashed arrow. One markdown line per path, split on →. Bold the node you're on. A dated list is Timeline. A schedule is Gantt.
- timeline
- A dated list. Write `- Mar 18: Docs`; bold the current row, italic the next. A punch list is Check. A schedule with start and end is Gantt.
- tree
- Nested list drawn with branch glyphs. Bold a node to highlight it — files, an org chart. Not a timeline or a table.
- gantt
- Work that overlaps on a shared calendar. Write `- build: 0.2 0.75 0.55`. A dated log is Timeline.
request → **middleware** → handler- **Mar 18: Docs, live previews**- registry/default
- **graph-tree.tsx** — ui- build: 0.2 0.75 0.55[ data ]
numbers with labels. stats, specs, tables, diffs.
- stat
- Two to four large numbers. Write `- 12,400 docs`; bold the one that matters. One number with a trend is KPI.
- spec
- Aligned label and value rows. Write `- Family: Geist Mono`. Headline numbers are Stat. A table with headers is Table.
- check
- A punch list. Write `- [x] freeze tokens`. A note after an em dash sits under the row. Dated steps are Timeline.
- diff
- What was added, removed, or kept. Write `- app: +31 kb`. Bold the total. Numeric before/after is Slope.
- kpi
- One large number with a sparkline under it.
- table
- A framed table. Write a markdown table inside the tag. Grouped sections are Sheet. Label/value rows are Spec.
- sheet
- A table with section titles — an API, an RFC. Write `### Scope` then a markdown table. A flat table is Table.
- compare
- Two options side by side. Write a markdown table; `yes`/`no` become ✓ and –. Exact numbers on both axes are Matrix.
- matrix
- Exact numbers on both axes. Write a markdown table. Intensities are Heatmap. Yes/no features are Compare.
- invoice
- From, bill-to, line items, and a totals block. Write a markdown table; from and to are strings. A generic grid is Table.
- **860** shipped- Family: Geist Mono- [x] freeze tokens- app: +31 kb| Agent | Tokens |
| --- | ---: |
| Inks and paper | 115,207 |### Scope
| Item | Owner |
| --- | --- |
| CLI copies files | priya || | Solo | Studio |
| --- | --- | --- |
| Registry | yes | yes || | Pos | Neg |
| --- | --- | --- |
| Pos | 41 | 3 || Description | Amount |
| --- | --- |
| Design system | 4,200 |[ charts ]
glyphs on a track. ranks, meters, sparks, grids.
- rank
- Labels ranked by a number. Write `- 12,400 /docs`. Two histograms side by side is Bars.
- funnel
- Steps that get narrower as people drop off. Write `- 12,400 docs`. A ranked list is Rank. A process is Flow.
- slope
- Two figures per row with an arrow between. Up uses the accent, down recedes.
- bullet
- Actual versus target on a shared track. The marker is the target.
- waterfall
- Running total as floating bars. First row is the start, last is the end, signed values in between.
- stack
- Parts of a whole on one track. Write `- marketing: 48 js, 22 css, 30 images`. A share of cells is Waffle.
- spark
- Sparkline from block characters. Values scale to the highest point.
- plot
- Line or area chart built from columns of block characters.
- meter
- Progress bar drawn with = characters. Empty slots stay as dashes.
- waffle
- Grid of 100 cells. The value sets how many are filled in.
- cells
- A small 0/1 grid. Write `- fragments: 1 0 1 0 0 / 0 1 0 1 0`. A share of a hundred cells is Waffle.
- bars
- Two small histograms, before and after. Write `- before: 2 4 3 5 2`. A ranked list is Rank.
- heatmap
- A labeled grid of intensities. Write a markdown table. Exact numbers are Matrix. A contribution calendar is Activity.
- activity
- GitHub-style contribution grid. Pass dated counts; weeks, months, and intensity are derived.
- 12,400 /docs- 4,100 copy- read: 160 → 142- CPU: 72 / 80- Refunds: -6- docs: 28 js, 18 css, 54 images- fragments: 1 0 1 0 0 / 0 1 0 1 0- before: 2 4 3 5 2| | 0 | 4 | 8 |
| --- | --- | --- | --- |
| Mon | 0 | 1 | 4 |[ time ]
days and clocks. uptime, a month, elapsed, remaining.
- uptime
- One glyph per day. ok, degraded, down, or empty. Wraps every 30 days.
- calendar
- One month as a seven-column grid. Marked days use the accent. today is wrapped in brackets.
- timer
- Elapsed time, how long ago, or the time of day. The numbers update every second.
- countdown
- Time left until a date. After that it shows a short label you pass in.
[ primitives ]
the frame every component is drawn in.