> Agent-readable docs index: /llms.txt. Download /docs.zip to grep all markdown files locally.

---
title: Components
description: Holocron's Mintlify-style component surface, organized like Mintlify's component docs.
icon: layout-grid
---

# Components

This section follows the same broad structure as Mintlify's component docs, but the examples render through **Holocron's actual MDX component map**.

## Browse by use case

<CardGroup cols={3}>
  <Card title="Structure content" icon="layout-grid" href="/docs/components/columns">
    Columns, cards, steps, tiles, and tree layouts.
  </Card>

  <Card title="Draw attention" icon="badge-alert" href="/docs/components/callouts">
    Callouts, badges, banner config, tooltips, and updates.
  </Card>

  <Card title="Show hidden content" icon="chevrons-up-down" href="/docs/components/accordions">
    Accordions, expandables, tabs, and views.
  </Card>

  <Card title="Document APIs" icon="braces" href="/docs/components/fields">
    Fields, responses, request examples, response examples, and panel layouts.
  </Card>

  <Card title="Visual helpers" icon="palette" href="/docs/components/color">
    Icons, color tokens, frames, mermaid diagrams, and previews.
  </Card>

  <Card title="AI-oriented UI" icon="message-square" href="/docs/components/prompt">
    Prompt cards and examples useful for agent-facing docs.
  </Card>
</CardGroup>

## Importing components in `.tsx` files

All MDX components are available from `@holocron.so/vite/mdx`. This is useful when you build custom components that compose Holocron primitives:

```tsx
import { Card, CardGroup, Callout, Steps, Step } from '@holocron.so/vite/mdx'

export function FeatureGrid({ features }) {
  return (
    <CardGroup cols={3}>
      {features.map((f) => (
        <Card key={f.title} title={f.title} icon={f.icon}>
          {f.description}
        </Card>
      ))}
    </CardGroup>
  )
}
```

You only need this import when writing `.tsx` component files. In MDX pages, all components are available globally without imports.

## What to expect on each page

* A short explanation of the Mintlify component concept
* Holocron examples that actually render in this repo
* A **Holocron differences** section when parity is incomplete or behavior differs

<Info>
  Some Mintlify docs describe behaviors that are broader than Holocron's current implementation. Those differences are called out explicitly instead of being hidden.
</Info>