tsx
'use client';
​
import {XDSMarkdown} from '@xds/core/Markdown';
​
const sources = {
  abc1: {
    title: 'Tokyo - Wikipedia',
    url: 'https://en.wikipedia.org/wiki/Tokyo',
    icon: 'https://en.wikipedia.org/favicon.ico',
  },
  def2: {
    title: 'Japan Statistics Bureau - Population',
    url: 'https://www.stat.go.jp/english/',
  },
  ghi3: {
    title: 'World Population Review',
    url: 'https://worldpopulationreview.com/world-cities/tokyo-population',
  },
  jkl4: {
    title: 'Reuters — Tokyo GDP',
    url: 'https://www.reuters.com/markets/',
    icon: 'https://www.reuters.com/favicon.ico',
  },
  mno5: {
    title: 'UN Urbanization Prospects',
    url: 'https://population.un.org/wup/',
  },
};
​
const content = [
  '## Tokyo Overview',
  '',
  'Tokyo is the capital of Japan with a population of over 14 million[abc1].',
  "It's the most populous metropolitan area in the world[def2][ghi3].",
  '',
  '### Economy',
  '',
  "Tokyo's GDP exceeds $1.9 trillion, making it the largest city economy globally[jkl4].",
  'The metropolitan area is expected to remain the most populous urban agglomeration through 2035[mno5].',
  '',
  '### Key Facts',
  '',
  '- Population: 13.96 million (city proper)[abc1]',
  '- Metro area: 37.4 million[def2]',
  '- GDP: $1.93 trillion[jkl4]',
].join('\n');
​
export default function MarkdownCitedContent() {
  return (
    <XDSMarkdown sources={sources} density="compact" headingLevelStart={3}>
      {content}
    </XDSMarkdown>
  );
}

tsx
'use client';
​
import {XDSMarkdown} from '@xds/core/Markdown';
​
const content = [
  '## Setting Up a Design System',
  '',
  "A design system is more than a component library — it's a **shared language** between design and engineering.",
  '',
  '### 1. Start with Tokens',
  '',
  'Design tokens are the atomic values that define your visual language:',
  '',
  '```typescript',
  'const tokens = {',
  '  color: {',
  "    primary: '#0066FF',",
  "    secondary: '#6B7280',",
  '  },',
  '  spacing: {',
  "    sm: '8px',",
  "    md: '16px',",
  "    lg: '24px',",
  '  },',
  '};',
  '```',
  '',
  '### 2. Component Architecture',
  '',
  'Good components follow these principles:',
  '',
  '- **Composable** — small pieces that combine into complex UIs',
  '- **Accessible** — keyboard navigation and screen reader support built-in',
  '- **Themeable** — visual customization without forking',
  '',
  '> The best design systems are *opinionated enough* to ensure consistency, but *flexible enough* to handle edge cases gracefully.',
].join('\n');
​
export default function MarkdownCompactAIResponse() {
  return (
    <XDSMarkdown density="compact" headingLevelStart={3}>
      {content}
    </XDSMarkdown>
  );
}

tsx
'use client';
​
import {XDSMarkdown} from '@xds/core/Markdown';
​
const content = [
  '## Comparison Table',
  '',
  '| Feature | React | Vue | Svelte |',
  '|:--------|:-----:|:---:|-------:|',
  '| Virtual DOM | Yes | Yes | No |',
  '| Bundle Size | ~40KB | ~30KB | ~2KB |',
  '| TypeScript | Native | Plugin | Native |',
  '| Learning Curve | Medium | Easy | Easy |',
].join('\n');
​
export default function MarkdownDataTable() {
  return <XDSMarkdown>{content}</XDSMarkdown>;
}

tsx
'use client';
​
import {XDSMarkdown} from '@xds/core/Markdown';
​
const content = [
  '# XDSMarkdown Demo',
  '',
  'Renders **markdown** with *design-system-consistent* styling.',
  '',
  '## Features',
  '',
  '- Headings mapped to XDS type scale',
  '- **Bold**, *italic*, and ~~strikethrough~~ text',
  '- [Links](https://example.com) with external detection',
  '- Inline `code` and fenced code blocks',
  '',
  '### Code Block',
  '',
  '```typescript',
  'interface User {',
  '  id: string;',
  '  name: string;',
  '}',
  '',
  'function greet(user: User) {',
  '  return `Hello, ${user.name}!`;',
  '}',
  '```',
  '',
  '### Blockquote',
  '',
  '> Design systems free teams to focus on problems that matter.',
  '',
  '### Table',
  '',
  '| Component | Status | Tests |',
  '|:----------|:------:|------:|',
  '| XDSMarkdown | Active | 73 |',
  '| XDSCodeBlock | Active | 44 |',
  '',
  '### Task List',
  '',
  '- [x] Parser',
  '- [x] Renderer',
  '- [ ] Storybook stories',
  '',
  '---',
  '',
  '1. First ordered item',
  '2. Second ordered item',
].join('\n');
​
export default function MarkdownRichContent() {
  return <XDSMarkdown>{content}</XDSMarkdown>;
}