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

---
"$schema": https://holocron.so/frontmatter.json
title: Components
description: Callouts, Cards, Tabs, Steps, Accordions, and more.
icon: blocks
---

# Components

Holocron includes all the standard Mintlify MDX components. This page shows the most common ones. Use them in any MDX page without importing anything.

<Aside>
  <Tip>
    All components are globally available. Just write `<Note>` or `<Card>` directly in your MDX files.
  </Tip>
</Aside>

## Callouts

Semantic callouts highlight important information with distinct visual styles:

<Note>
  Use `Note` for neutral supporting information.
</Note>

<Warning>
  Use `Warning` when the user should slow down or verify something.
</Warning>

<Info>
  Use `Info` for factual guidance that should stand out from the prose.
</Info>

<Tip>
  Use `Tip` for shortcuts and helpful advice.
</Tip>

<Check>
  Use `Check` for successful or recommended paths.
</Check>

<Danger>
  Use `Danger` for destructive or high-risk actions.
</Danger>

## Cards

Cards work well for docs homepages and section hubs:

<CardGroup cols={2}>
  <Card title="Linked card" icon="arrow-right" href="/quickstart">
    Cards can link to other pages in your docs.
  </Card>

  <Card title="Icon card" icon="sparkles">
    Or just highlight a feature with an icon.
  </Card>
</CardGroup>

## Tabs

Split related content into tabbed panels:

<Tabs>
  <Tab title="npm">
    ```bash
    npm install @holocron.so/vite react react-dom vite
    ```
  </Tab>

  <Tab title="pnpm">
    ```bash
    pnpm add @holocron.so/vite react react-dom vite
    ```
  </Tab>

  <Tab title="bun">
    ```bash
    bun add @holocron.so/vite react react-dom vite
    ```
  </Tab>
</Tabs>

## Steps

Ordered procedures where each step matters:

<Steps>
  <Step title="Create the config">
    Add a `docs.jsonc` with your site name and navigation.
  </Step>

  <Step title="Write MDX pages">
    Create `.mdx` files for each page in your docs.
  </Step>

  <Step title="Run the dev server">
    Start with `npx vite` and see your site at `localhost:5173`.
  </Step>
</Steps>

## Accordions

Collapsible sections for optional or supplementary content:

<AccordionGroup>
  <Accordion title="What is Holocron?" icon="circle-help" defaultOpen>
    A Mintlify-compatible documentation site generator that runs as a Vite plugin. You write MDX, define navigation in `docs.jsonc`, and Holocron builds the full site.
  </Accordion>

  <Accordion title="Can I use my existing Mintlify config?" icon="arrow-right-left">
    Yes. Holocron reads the same `docs.jsonc` schema and supports the same MDX components. Drop in the plugin and your existing config works.
  </Accordion>
</AccordionGroup>

## Code blocks

Fenced code blocks support syntax highlighting and optional filenames:

```ts vite.config.ts
import { defineConfig } from 'vite'
import { holocron } from '@holocron.so/vite'

export default defineConfig({
  plugins: [holocron()],
})
```

## More components

Holocron also supports `Expandable`, `Panel`, `Frame`, `Prompt`, `Columns`, `Badge`, `Tooltip`, `Tree`, and more. Check the [Holocron docs](https://holocron.so/docs/components) for the full reference.


---

*Powered by [holocron.so](https://holocron.so)*