@itu/docs-ui
Documentation UI components used to build this docs site. Contains 23+ components for displaying component APIs, design tokens, code examples, and content manager references.
Key Components
| Component | Purpose |
|---|---|
| **PropsTable** | Auto-generated API reference tables from props JSON |
| **VariantShowcase** | Side-by-side variant display with auto-grid from variants JSON |
| **ComponentPlayground** | Interactive preview with auto-generated controls |
| **AccessibilityReport** | A11y audit results display with per-variant breakdown |
| **CodeBlock** | Syntax-highlighted code with Shiki |
| **ColorPalette** | Design token color visualization |
| **SpacingScale** | Spacing token bars |
| **TypeScale** | Typography specimens |
| **FileTree** | Directory structure display |
| **Callout** | Tip/info/warning/danger admonitions |
| **BlockFieldReference** | CMS block field documentation |
Usage
All components are globally available in MDX files — no imports needed.
mdx
<Callout type="tip"> This renders without any import statement. </Callout>
3 lines of mdx code
Installation
bash
pnpm add @itu/docs-ui
1 line of bash code