Component Showcase

This page demonstrates all MDX components available for documentation authors. Components come from three sources: Fumadocs defaults (auto-registered), Fumadocs UI (registered in mdx-components.tsx), and custom components.

Cards

Cards are included via defaultMdxComponents. Use <Cards> as a container and <Card> for each item. Cards can link to other pages.

Callouts

Callouts support type variants and optional titles.

Tabs

Use <Tabs> for language switching, role-specific instructions, or multi-option content.

pnpm install @cashew/docs

npm install @cashew/docs

yarn add @cashew/docs

Tabs with the same groupId sync selections across the page:

pnpm dev:docs

npm run dev:docs

yarn dev:docs

Steps

Use <Steps> for numbered procedures, setup guides, and runbooks.

git clone https://github.com/cashew-research/cashew-mono.git

pnpm install

pnpm dev:docs

Accordion

Use <Accordions> for FAQ sections or collapsible details.

Files

Use <Files> to render project directory structures.

TypeTable

Use <TypeTable> to document configuration options, props, or API parameters with type information.

Banner

Use <Banner> for site-wide announcements or notices at the top of a page.

Images

Local Image (from public folder)

Store images in apps/docs/public/images/ and reference them with an absolute path. Use <ImageZoom> with explicit width and height (required by Next.js Image optimization):

ImageZoom Component

The <ImageZoom> component wraps images with a click-to-zoom overlay — useful for screenshots and architecture visuals.

Tables

Standard markdown tables render with proper styling via remark-gfm.

Code Blocks

Fumadocs provides enhanced code blocks with syntax highlighting, line numbers, titles, and line highlighting.

Basic code block

const greeting = 'Hello, Cashew!';
console.log(greeting);

With title

export type PermissionTier = 'public' | 'user' | 'internal';

With line highlighting

async function getPermissionTier(): Promise<PermissionTier> {
  const session = await auth(); // highlighted
  if (!session?.user) return 'public';
  const email = session.user.email;
  return email.endsWith('@cashewresearch.com') ? 'internal' : 'user'; // highlighted
}

Inline Formatting

Standard markdown inline formatting works as expected:

• Bold text for emphasis
• Italic text for secondary emphasis
• inline code for code references
• Strikethrough for deprecated content
• Links for navigation
• Keyboard shortcuts: press ⌘ + K to search

Lists

Unordered list

• First item
• Second item
  • Nested item
  • Another nested item
• Third item

Ordered list

1. First step
2. Second step
   1. Sub-step A
   2. Sub-step B
3. Third step

Task list

• Set up Fumadocs
• Configure Tailwind isolation
• Add content gating
• Write all documentation content

Blockquotes

Documentation is a love letter that you write to your future self. — Damian Conway

Horizontal Rules

Use --- to create visual section breaks (like the ones between sections on this page).

Mermaid Diagrams

Use fenced mermaid code blocks to render diagrams. They support light and dark themes automatically.

Flowchart

Sequence Diagram