mdxcn README

The project's README from github.com/shadcn-labs/mdxcn. As one markdown file: README.md.

markdown graphs

React components for ASCII-style tables, charts, and diagrams in MDX. Built so an agent can drop a figure next to prose — JSX in MDX, ::graph-* in Comark, official ASCII in a README. Each graph sits in a dashed frame with a title on the top edge. One accent color by default; drawing graphs can take palette="duo" or palette="multi". You copy the source into your project — this is not an npm package.

Docs · Comark · For agents · Examples · Install · Skill · GitHub

Install

You need an existing shadcn project and motion.

Scoped registry (same idea as @dotmatrix/dotm-square-3):

pnpm dlx shadcn@latest registry add @mdx-graphs=https://mdx-graphs.kshv.me/r/{name}.json
pnpm dlx shadcn@latest add @mdx-graphs/graph-table
pnpm dlx shadcn@latest add @mdx-graphs/all

Or paste the full URL once:

pnpm dlx shadcn@latest add https://mdx-graphs.kshv.me/r/graph-table.json
pnpm dlx shadcn@latest add https://mdx-graphs.kshv.me/r/all.json

components.json after registry add:

{
  "registries": {
    "@mdx-graphs": "https://mdx-graphs.kshv.me/r/{name}.json"
  }
}

Files land under @/registry/default. Import from there:

import { GraphTable } from "@/registry/default/graph-table/graph-table"

Components

Component Registry item Use for
Table graph-table Data tables with optional footer totals
Sheet graph-sheet Tables with section titles
Flow graph-flow Process diagrams on a dashed arrow
Bars graph-bars Two bar groups, side by side
Cells graph-cells Filled / empty grids
Meter graph-meter Progress as = and -
Spark graph-spark Sparkline from block characters
Tree graph-tree File or org trees
Timeline graph-timeline Dated events, one row current
Check graph-check Punch list, [x] / [ ]
Stack graph-stack Parts of a whole, glyphs instead of colors
Funnel graph-funnel Steps that get narrower
Gantt graph-gantt Schedule on a character track
Plot graph-plot Line or area from columns of glyphs
Waffle graph-waffle Share of 100 cells
Diff graph-diff Add / remove / keep rows
Invoice graph-invoice From, bill-to, line items, totals
Compare graph-compare Feature matrix (✓ / –)
Matrix graph-matrix Exact numbers on both axes
Stat graph-stat Large figures with labels
Spec graph-spec Label / value sheets
Activity graph-activity GitHub-style contribution grid
Heatmap graph-heatmap Labeled 2d intensity matrix
Calendar graph-calendar One month, marked days
Waterfall graph-waterfall Running total as floating bars
Uptime graph-uptime One glyph per day, percent up
Slope graph-slope Two figures per row, before → after
Bullet graph-bullet Actual versus target on one track
Rank graph-rank A ranked list, one bar per row
KPI graph-kpi One number with a sparkline under it
Timer graph-timer Elapsed time, how long ago, or the clock
Countdown graph-countdown Time left until a date
Frame graph-frame Shared dashed frame primitives

Each docs page has CLI, manual, agent, MDX, and Comark install tabs. Copy page puts the markdown (install, prompt, examples, props) on the clipboard.

Comark apps render the same figures from ::graph-* blocks in a plain .md file — no MDX. Copy graph-comark (already in all.json). Full install: graphComponents from graph-components.tsx. Subset: createGraphComponents. Wiring: Comark. Pitch: Comark landing.

Composed write-ups (refactor, incident, tradeoff, PR, sprint, migration) live on Examples. For agents is the write and read story. The skill tells an agent which graph to put next to the prose — JSX in React, ::graph-* in Comark, fenced ASCII in GitHub. Agents can also fetch /llms.txt for the chooser, the ASCII blocks, and the Comark blocks.

Design

Development

pnpm install
pnpm dev

Rebuild the shadcn registry after changing files under registry/default:

pnpm registry:build

License

MIT

mdxcn (shadcn-labs/mdxcn)

ascii-art
Searching Database…

436 ·GitHub
Mdxcn
What is this?mdxcn is a free, open-source set of ASCII-style React components — tables, charts, timelines, flows, and more — meant to sit next to prose in MDX or plain Markdown, designed to be copied into your own project rather than installed as a package.
Is this an npm package I install, or do I copy the code in?It is not an npm package. You add individual components (registry items like graph-table, graph-flow, graph-timeline) to your own codebase using the shadcn CLI, which copies the source files directly into your project.
How do I add these graph components to my project?Run the shadcn CLI against mdxcn's scoped registry (or paste the full registry URL) to add a component — it drops the files under @/registry/default, and you run `shadcn build` after making changes to rebuild the registry.
What do I need before installing a component?You need an existing shadcn project already set up plus the motion package installed, since the components use Motion for their transform/opacity transitions.
Can I use these graphs outside of MDX/React?Yes — Comark apps can render the same figures from plain `::graph-` blocks in a regular .md file with no MDX needed, and the fenced-ASCII form can even be dropped into a plain GitHub README.
How many graph types are included?Over 30 components ship out of the box — things like Table, Flow, Bars, Timeline, Gantt, Heatmap, Waterfall, Rank, KPI, and Countdown — each listed in the README with its registry name and typical use.
Why ASCII instead of SVG charts?Every graph is deliberately drawn with monospace glyphs inside a dashed Geist Mono frame instead of SVG, keeping figures lightweight and visually consistent with surrounding code or prose.
What is Comark?Comark is the markdown tooling mdxcn also targets, rendering the same figures from `::graph-` fenced blocks in plain .md files so non-MDX markdown apps can display them too.
How do coding agents use this?mdxcn ships a skill and an /llms.txt endpoint telling an agent which graph to place next to prose, covering JSX for MDX, ::graph- syntax for Comark, and fenced ASCII for plain GitHub READMEs.
What are similar projects?arc-library, magicui, Monocharts, canvas-ui, rare-ui, tremor-npm, ascii, chakra-ui
Which topics is it in?ascii-art, shadcn, diagrams, mdx, ui-library, charts, component-library, data-visualization, design, nextjs, ui-components, animation
Creator
shadcn-labs
Size
2.6 MB
Stars
436
Updated
CommitOct 15
Age
1mo
Commits · 90 Days