---
title: Components
description: Choose the right built-in component for layout, code, callouts, and media, or stick with plain Markdown when it is enough.
---

Add these components to any page file under `docs/`. Components are available globally with no imports required. Plain Markdown handles paragraphs, lists, and links; components add structure for tabs, callouts, code examples, and API reference fields.

## Structure

<CardGroup cols={1}>
  <Card title="Tabs" icon="folder" href="/components/tabs">
    Switchable panels for related content.
  </Card>
  <Card title="Accordion" icon="chevron-down" href="/components/accordion">
    Expandable sections for hidden detail.
  </Card>
  <Card title="Steps" icon="list-ol" href="/components/steps">
    Numbered steps for tutorials and guides.
  </Card>
  <Card title="Card" icon="square" href="/components/card">
    Linked tiles for overview pages.
  </Card>
  <Card title="Heading" icon="heading" href="/components/heading">
    Anchor links on headings.
  </Card>
</CardGroup>

## Code

<CardGroup cols={1}>
  <Card title="Code blocks" icon="code" href="/components/code-blocks">
    Highlighted code with a copy button.
  </Card>
  <Card title="Code group" icon="code-branch" href="/components/code-group">
    Tabbed code for multiple languages.
  </Card>
</CardGroup>

## Reference

<CardGroup cols={1}>
  <Card title="Callouts" icon="message" href="/components/callouts">
    Styled alerts for emphasized content.
  </Card>
  <Card title="Property" icon="sliders" href="/components/property">
    API fields with type and badge labels.
  </Card>
</CardGroup>

## Media

<CardGroup cols={1}>
  <Card title="Icon" icon="icons" href="/components/icon">
    Font Awesome icons by slug.
  </Card>
  <Card title="Image" icon="image" href="/components/image">
    Repo images with alt text and zoom.
  </Card>
  <Card title="Video" icon="video" href="/components/video">
    HTML5 video from a URL.
  </Card>
  <Card title="YouTube" icon="youtube" href="/components/youtube">
    YouTube embed by video ID.
  </Card>
  <Card title="Vimeo" icon="vimeo" href="/components/vimeo">
    Vimeo embed by video ID.
  </Card>
  <Card title="Tweet" icon="x-twitter" href="/components/tweet">
    Twitter/X embed by status ID.
  </Card>
</CardGroup>

## Related

- [Write](/authoring/write)
- [docs.json](/reference/docs-json)