***

title: Components overview
description: >-
Complete guide to Fern documentation components. Build better docs with
accordions, callouts, tables, tabs, and interactive API features.
-----------------------------------------------------------------

For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see [https://buildwithfern.com/learn/llms.txt](https://buildwithfern.com/learn/llms.txt). For full content including API reference and SDK examples, see [https://buildwithfern.com/learn/llms-full.txt](https://buildwithfern.com/learn/llms-full.txt).

Fern includes 26 built-in components for creating interactive documentation. Select a component below to view usage examples and configuration options.

<CardGroup cols={3}>
  <Card title="Accordion" icon="fa-duotone fa-chevron-down" href="/docs/writing-content/components/accordions">
    Expandable sections for FAQs and collapsible content
  </Card>

  <Card title="Anchor" icon="fa-duotone fa-link" href="/docs/writing-content/components/anchor">
    Linkable anchors for paragraphs, tables, and other content
  </Card>

  <Card title="Aside" icon="fa-regular fa-comment-dots" href="/docs/writing-content/components/aside">
    Sticky container for content positioned to the right of the page
  </Card>

  <Card title="Badge" icon="fa-regular fa-ribbon" href="/docs/writing-content/components/badges">
    Small labels for status, versions, and metadata
  </Card>

  <Card title="Button" icon="fa-duotone fa-arrow-pointer" href="/docs/writing-content/components/button">
    Interactive button component with multiple variants and intents
  </Card>

  <Card title="Callout" icon="fa-duotone fa-exclamation-triangle" href="/docs/writing-content/components/callouts">
    Highlighted boxes for important information, warnings, and tips
  </Card>

  <Card title="Card" icon="fa-duotone fa-id-card" href="/docs/writing-content/components/cards">
    Visually distinct box with optional icons and links
  </Card>

  <Card title="Code block" icon="fa-duotone fa-code" href="/docs/writing-content/components/code-blocks">
    Code examples with syntax highlighting and interactive features
  </Card>

  <Card title="Copy" icon="fa-duotone fa-clipboard" href="/docs/writing-content/components/copy">
    Make text copyable with a click-to-copy button
  </Card>

  <Card title="Download" icon="fa-duotone fa-download" href="/docs/writing-content/components/download">
    Download PDFs and other assets
  </Card>

  <Card title="Endpoint request snippet" icon="fa-duotone fa-arrow-up" href="/docs/writing-content/components/request-snippet">
    Endpoint request snippets from your API Reference
  </Card>

  <Card title="Endpoint response snippet" icon="fa-duotone fa-arrow-down" href="/docs/writing-content/components/response-snippet">
    Endpoint response snippets from your API Reference
  </Card>

  <Card title="Endpoint schema snippet" icon="fa-duotone fa-sitemap" href="/learn/docs/writing-content/components/schema-snippet">
    Endpoint schema snippets from your API Reference
  </Card>

  <Card title="Files" icon="fa-duotone fa-folder-tree" href="/docs/writing-content/components/files">
    Display interactive file tree structures with expandable folders
  </Card>

  <Card title="Frame" icon="fa-duotone fa-window-maximize" href="/docs/writing-content/components/frames">
    Container for images with optional captions and backgrounds
  </Card>

  <Card title="Icon" icon="fa-duotone fa-icons" href="/docs/writing-content/components/icons">
    Font Awesome icons for visual elements
  </Card>

  <Card title="If" icon="fa-duotone fa-filter" href="/docs/writing-content/components/if">
    Show or hide content based on instance, product, version, or user role
  </Card>

  <Card title="Indent" icon="fa-duotone fa-indent" href="/docs/writing-content/components/indent">
    Visual hierarchy with indentation and guide lines for nested content
  </Card>

  <Card title="Parameter field" icon="fa-duotone fa-list" href="/docs/writing-content/components/parameter-fields">
    API parameter documentation with consistent formatting
  </Card>

  <Card title="Runnable endpoint" icon="fa-duotone fa-play-circle" href="/docs/writing-content/components/runnable-endpoint">
    Interactive request builder for testing API endpoints
  </Card>

  <Card title="Schema" icon="fa-duotone fa-brackets-curly" href="/docs/writing-content/components/schema">
    Display any type definition from your API Reference
  </Card>

  <Card title="Step" icon="fa-duotone fa-list-ol" href="/docs/writing-content/components/steps">
    Sequenced instructions with automatic numbering and anchor links
  </Card>

  <Card title="Table" icon="fa-duotone fa-table" href="/docs/writing-content/components/tables">
    Display data in rows and columns with optional sticky headers
  </Card>

  <Card title="Tab" icon="fa-duotone fa-folder-open" href="/docs/writing-content/components/tabs">
    Tabbed interface for organizing related content
  </Card>

  <Card title="Tooltip" icon="fa-duotone fa-comment" href="/docs/writing-content/components/tooltips">
    Additional information displayed on hover
  </Card>

  <Card title="Versions" icon="fa-duotone fa-code-branch" href="/docs/writing-content/components/versions">
    Display different content based on version selection
  </Card>
</CardGroup>