URL: /guides/customization/components

---
title: Components
description: MDX components shipped with Tangly — overview and per-page reference links.
icon: "puzzle"
---

# Components

All 28 built-in components are auto-injected into MDX — no imports required. Prop signatures match Mintlify exactly so existing content renders unchanged.

For full prop reference per component, see the [Components reference](/reference/components/callouts).

## Quick tour

### Callouts

<Note>This is a Note.</Note>
<Tip>This is a Tip.</Tip>
<Warning>This is a Warning.</Warning>
<Info>This is Info.</Info>
<Check>This is a Check.</Check>
<Danger>This is Danger.</Danger>

```md
<Note>Heads up.</Note>
<Tip>Pro tip.</Tip>
<Warning>Watch out.</Warning>
```

### Cards

<CardGroup cols={2}>
  <Card title="With href" icon="arrow-right" href="/quickstart">
    Click-through card with icon.
  </Card>
  <Card title="No href" icon="info">
    Plain card, no link.
  </Card>
</CardGroup>

### Tabs

<Tabs>
  <Tab title="bun">
    ```bash
    bun x tangly dev
    ```
  </Tab>
  <Tab title="npm">
    ```bash
    npx tangly dev
    ```
  </Tab>
</Tabs>

### Steps

<Steps>
  <Step title="One">First step.</Step>
  <Step title="Two">Second step.</Step>
  <Step title="Three">Third step.</Step>
</Steps>

### Accordion

<AccordionGroup>
  <Accordion title="Question one">Answer one.</Accordion>
  <Accordion title="Question two">Answer two.</Accordion>
</AccordionGroup>

### API rows

<ParamField path="user_id" type="string" required>
  The user's UUID.
</ParamField>

<ResponseField name="email" type="string">
  The user's email address.
</ResponseField>

## All components

| Component | Reference page |
| --------- | -------------- |
| `Card`, `CardGroup`, `Columns` | [Cards](/reference/components/cards) |
| `Note`, `Tip`, `Warning`, `Info`, `Check`, `Danger`, `Update` | [Callouts](/reference/components/callouts) |
| `Tabs`, `Tab`, `Steps`, `Step`, `Accordion`, `AccordionGroup`, `Expandable` | [Tabs, Steps, Accordions](/reference/components/tabs-and-steps) |
| `CodeGroup` (and fenced code blocks) | [Code](/reference/components/code) |
| `Frame`, `Columns`, `Expandable` | [Layout](/reference/components/layout) |
| `ParamField`, `ResponseField`, `RequestExample`, `ResponseExample`, `OpenApiEndpoint`, `OpenApiScalar`, `OpenApiRedoc`, `OpenApiStoplight` | [API components](/reference/components/api) |
| `Icon`, `Tooltip`, `Badge`, `Snippet`, `Embed` | [Media & misc](/reference/components/media) |

## Customizing

Override any component by [shadowing](/guides/custom-components) — drop a file at `<userRoot>/components/<Name>.{astro,tsx}` and Vite resolves your version everywhere it's used.

For new components that aren't in the built-in set, import them explicitly in your MDX:

```md
import Tldr from "../components/Tldr.astro";

<Tldr>Short summary.</Tldr>
```

Auto-registration via `tangly.config.ts` is on the roadmap but not yet wired.