Components for displaying structured data — tables, diagrams, colors, and version-specific content.
Tables
Create tables from JSON data with wc-table:
<wc-table>
[
{ "Command": "init", "Description": "Scaffold a new project", "Default": "my-docs" },
{ "Command": "dev", "Description": "Start dev server", "Default": "port 3000" },
{ "Command": "build", "Description": "Generate static site", "Default": "dist/" },
{ "Command": "validate", "Description": "Check project health", "Default": "-" }
]
</wc-table>
[
{ "Command": "init", "Description": "Scaffold a new project", "Default": "my-docs" },
{ "Command": "dev", "Description": "Start dev server", "Default": "port 3000" },
{ "Command": "build", "Description": "Generate static site", "Default": "dist/" },
{ "Command": "validate", "Description": "Check project health", "Default": "-" }
]
Use wc-table for large datasets that benefit from sticky headers. Use standard Markdown tables for small, simple data.
Mermaid diagrams
Render diagrams with wc-mermaid:
<wc-mermaid>
graph LR
A[Write Markdown] --> B[docslit build]
B --> C[Static HTML]
B --> D[Search Index]
B --> E[llms.txt]
</wc-mermaid>
graph LR
A[Write Markdown] --> B[docslit build]
B --> C[Static HTML]
B --> D[Search Index]
B --> E[llms.txt]
Mermaid diagrams support flowcharts, sequence diagrams, class diagrams, and more. Click the expand icon to view diagrams in a larger modal.
Click a swatch to copy the hex value. Use this component for design system documentation and style guides.
The color in hex format (e.g., #3b82f6).
The CSS custom property name for this color.
Version-specific content
Show different content based on the selected version with wc-versions and wc-version:
<wc-versions>
<wc-version version="0.2">
The `build` command now generates `llms.txt` and `llms-full.txt` automatically.
</wc-version>
<wc-version version="0.1">
Run `docslit build` to generate your static site.
</wc-version>
</wc-versions>
The build command now generates llms.txt and llms-full.txt automatically.
Run docslit build to generate your static site.