Components

ReviteDocs provides built-in components and supports custom MDX components.

Built-in Components

Callout

Display important information with callouts:

Usage:

<Callout variant="info" title="Information">
  This is informational content.
</Callout>

Available variants: info, tip, warning, danger, note

TabGroup

Organize content in tabs:

npm install revitedocs

Usage:

<TabGroup labels={['npm', 'yarn', 'pnpm']}>
  <div>npm install revitedocs</div>
  <div>yarn add revitedocs</div>
  <div>pnpm add revitedocs</div>
</TabGroup>

MermaidDiagram

Create diagrams with Mermaid:

Usage:

<MermaidDiagram chart={`
graph LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
`} />

Or in markdown files with fenced code blocks:

```mermaid
graph LR
    A[Start] --> B{Decision}
```

Steps

Show sequential steps:

Usage:

<Steps>
  <Step number={1}>First step content</Step>
  <Step number={2}>Second step content</Step>
  <Step number={3}>Third step content</Step>
</Steps>

FileTree

Display directory structures:

Usage:

<FileTree items={[
  'project/',
  '  src/',
  '    components/',
  '      Button.tsx',
  '    index.ts',
  '  package.json'
]} />

Custom Components

Using MDX

Create .mdx files to use React components directly:

import { MyButton } from '../components/MyButton'

# My Page

<MyButton onClick={() => alert('Clicked!')}>
  Click Me
</MyButton>

Component Slots

Override default layout components by creating files in .revitedocs/theme/:

Example custom header:

// .revitedocs/theme/Header.tsx
export default function Header({ title }) {
  return (
    <header className="custom-header">
      <h1>{title}</h1>
    </header>
  )
}

Styling Components

Use Tailwind CSS classes in your components:

export function Card({ children }) {
  return (
    <div className="p-4 rounded-lg border bg-white dark:bg-gray-800">
      {children}
    </div>
  )
}