---
title: Component Showcase
description: A visual demo of the MDX components available in Thally.
url: http://localhost:3040/showcase
---

# Component Showcase

A visual demo of the MDX components available in Thally.

This page demonstrates the built-in components and typography styles available in Thally. Use it as a reference when authoring your own documentation.

## Headings

### Section Title (H3)

#### Nested Detail (H4)

Body text maintains consistent rhythm regardless of heading depth. Inline code like `npm run dev` renders with a subtle background.

## Lists

- **Bold items** stand out in unordered lists
- _Italicized text_ for emphasis
- Links [with hover underlines](#lists)

1. Ordered lists for sequential steps
2. Nested content works too:
   - Sub-item with a `code` fragment
   - Another nested bullet

> Blockquotes are styled with a left border and muted text.

## Callouts

Use info notes for helpful tips and additional context.

Warnings highlight potential issues or important caveats.

Danger notes flag breaking changes or critical errors.

## Tables

| Feature | Status | Notes |
| --- | --- | --- |
| MDX pages | Supported | File-based routing |
| API reference | Supported | OpenAPI 3.x |
| Search | Supported | Client-side |
| Dark mode | Supported | Automatic |

## Code blocks

### Single language

```bash
npx create-thally-docs my-docs
cd my-docs
npm run dev
```

### Multi-language group

```bash
npm install
```

```bash
yarn install
```

```bash
pnpm install
```

### JSON example

```json
{
  "tabs": [
    {
      "tab": "Overview",
      "groups": [
        {
          "group": "Getting Started",
          "pages": ["introduction", "quickstart"]
        }
      ]
    }
  ]
}
```

## Steps

Run the CLI to scaffold a new project:

```bash
npx create-thally-docs my-docs
```

You'll be prompted for a project name, description, and brand preset.

Create `.mdx` files in `src/content/` and register them in `docs.json`:

1. Write your page with frontmatter (`title`, `description`)
2. Add the page slug to a group in `docs.json`
3. The sidebar updates automatically

Use the `showcase` page to preview all available components as you write.

Build and verify the Cloudflare Worker:

```bash
npm run build:cloudflare
npm run smoke:cloudflare
```

- **Cloudflare Workers** — deploy with `npm run deploy:cloudflare`
- **Node or Docker** — use `npm run build && npm start`

## Tabs

```bash
brew install node
npx create-thally-docs my-docs
```

```bash
winget install OpenJS.NodeJS
npx create-thally-docs my-docs
```

```bash
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs
npx create-thally-docs my-docs
```

## Cards

Get a docs site running in under five minutes.

Control navigation, tabs, and groups with docs.json.

Generate interactive API docs from an OpenAPI spec.

## Frame

Wrap images in a `` for a styled border, optional caption, and click-to-zoom:

![JavaScript and flowchart](/images/image1.jpg)

You can also wrap non-image content. Use `zoom={false}` to disable the zoom overlay:

| Token | Purpose |
| --- | --- |
| `background` | Page background |
| `accent` | Primary brand color |
| `foreground` | Text color |

## Accordion

Thally is an open-source documentation template built with Next.js, MDX, and Tailwind CSS. It gives you a production-ready docs site with zero vendor lock-in.

Create an `.mdx` file in `src/content/`, then add its slug to a group in `docs.json`. The sidebar updates automatically.

Yes. Create a component in `src/components/` and register it in `src/components/mdx/mdx-components.tsx`. It will be available in all MDX files.

## Tooltip

Hover over the underlined text to see a tooltip. You can also use tooltips to explain API acronyms or technical terms inline.

## Columns

<div>

### Left column

![HTML browser](/images/image2.jpg)

Columns are useful for side-by-side comparisons, feature lists, or layout variety.

</div>

<div>

### Right column

![City skyline](/images/image3.jpg)

Each column supports full MDX content including images, code blocks, lists, and callouts.

</div>

Toggle between light and dark themes to verify all components render correctly in both modes.