mdxcn
mdxcn is a free, open-source set of callouts, steps, terminals, charts, and timelines for mdx. copy any component with the shadcn cli.
Dashed ASCII frame, title, corners, and motion helpers.
Note, tip, warning, or danger between paragraphs. Markdown children.
A pull quote with attribution. Markdown children.
Numbered procedure. Each Step has a title and Markdown body.
A shell session. $ lines are commands, the rest is output.
One release. Change children marked add, change, fix, or remove.
Code with numbered notes. A fence with // (1) markers, then an ordered list.
One decision and the options next to it. Bold is chosen, italic is rejected.
A conversation. `- you: …` / `- agent: …`. Your turns get the prompt.
Environment variables from a .env fence. Comments describe, `required` marks.
One API route. Method and path, a params table, request and response fences.
Keyboard shortcuts as keycaps. `- ⌘K: search`.
Questions and answers. `### Question`, then the answer in Markdown.
withMdxcn for mdx-components.tsx. GitHub alerts become Callout, a byline makes a Quote, console fences become Terminal, footnotes get a frame, and overridden tags still parse.
Framed data table with optional footer totals.
Grouped table with section titles.
Typed process diagram with dashed arrows.
Before/after bar comparison with a processor in the middle.
A list of labels with a bar of characters and a number on the right.
Filled and empty cell grids for comparing density.