# Components

> Explore the full library of built-in components available in your documentation pages.

Source: https://docs.doccupine.com/components

> For the complete documentation index, see [llms.txt](https://docs.doccupine.com/llms.txt).

# Components

Doccupine includes a rich set of built-in components you can use directly in your MDX files - no imports needed. Browse the full library below.

<Columns cols={2}>
  <Card title="Headers and Text" icon="heading" href="/headers-and-text">
    Headings, paragraphs, bold, italic, links, and other text formatting.
  </Card>
  <Card title="Lists and Tables" icon="list" href="/lists-and-tables">
    Ordered lists, unordered lists, and data tables.
  </Card>
  <Card title="Code" icon="code" href="/code">
    Inline code, fenced code blocks, and syntax highlighting.
  </Card>
  <Card title="Prompt" icon="sparkles" href="/prompt">
    Pre-built AI prompts readers can copy or open in Cursor.
  </Card>
  <Card title="Callouts" icon="megaphone" href="/callouts">
    Highlighted blocks for tips, warnings, and important notes.
  </Card>
  <Card title="Accordion" icon="chevrons-down" href="/accordion">
    Collapsible sections for organizing lengthy content.
  </Card>
  <Card title="Tabs" icon="panel-top" href="/tabs">
    Tabbed interfaces for grouping related content.
  </Card>
  <Card title="Steps" icon="footprints" href="/steps">
    Numbered step-by-step guides and walkthroughs.
  </Card>
  <Card title="Tree" icon="folder-tree" href="/tree">
    File and folder structures with collapsible nodes and keyboard navigation.
  </Card>
  <Card title="Cards" icon="square" href="/cards">
    Visual containers for content, icons, and links.
  </Card>
  <Card title="Buttons" icon="mouse-pointer-click" href="/buttons">
    Action components with variants, sizes, and icons.
  </Card>
  <Card title="Badges" icon="tag" href="/badges">
    Colored labels for statuses, versions, and metadata.
  </Card>
  <Card title="Tooltips" icon="message-square" href="/tooltips">
    Contextual definitions and explanations shown on hover.
  </Card>
  <Card title="Images and Embeds" icon="image" href="/images-and-embeds">
    Images, videos, and embedded content.
  </Card>
  <Card title="Frames" icon="frame" href="/frames">
    Bordered containers with captions for images, videos, and diagrams.
  </Card>
  <Card title="Icons" icon="smile" href="/icons">
    Lucide icons you can use anywhere in your docs.
  </Card>
  <Card title="Columns" icon="columns-3" href="/columns">
    Grid layouts for arranging cards and content side by side.
  </Card>
  <Card title="Side Panel" icon="panel-right" href="/side-panel">
    Pinned right-rail content that replaces a page's table of contents.
  </Card>
  <Card title="Fields" icon="text-cursor-input" href="/fields">
    Property and parameter documentation blocks.
  </Card>
  <Card title="API Playground" icon="square-terminal" href="/api-playground">
    Interactive API reference where readers send real requests and see live responses.
  </Card>
  <Card title="Update" icon="bell" href="/update">
    Changelog blocks with a subscribable RSS feed.
  </Card>
  <Card title="Color Swatches" icon="palette" href="/color-swatches">
    Visual color palette swatches to document your theme colors.
  </Card>
  <Card title="Mermaid" icon="workflow" href="/mermaid">
    Flowcharts, sequence diagrams, and other visualizations from Mermaid syntax.
  </Card>
  <Card title="Space" icon="move-vertical" href="/space">
    Precise vertical or horizontal gaps, with per-breakpoint control.
  </Card>
</Columns>