Skip to content
mdxcn is now part of Shadcn Labs. details
mdxcn
[482]

markdown-friendly components for mdx

Callouts, timelines, tables and charts, drawn with text. In MDX you write a Markdown list inside a tag and get a live React component. In a README or a pull request, you paste the same figure as a code block.

browse components

you write

<GraphTimeline title="SHIPPED">

- Mar 12: CLI copies the files
- **Mar 18: Docs, live previews**
- *Apr 02: Registry listed*

</GraphTimeline>

readers see

[ SHIPPED ]
  1. Mar 12CLI copies the files
  2. Mar 18Docs, live previews
  3. Apr 02Registry listed

give your agent the same library

Install the skill and your agent picks a graph that fits the content, fills it with real values, and puts it next to the paragraph it supports. It writes JSX in MDX files, ::graph-* blocks for Comark, and filters for Knap.

In plain Markdown it pastes the same text figure the docs give you, rather than inventing a one-off diagram.

install the agent skill

questions

Short answers on installing, where the figures work, and how agents use them. The library lists every component.

A set of React components for docs and write-ups: callouts, steps, timelines, tables and small charts. They're drawn with text characters, so they sit naturally between paragraphs and still make sense as plain text. Each one has a screen-reader summary and uses your theme's colors.