Components — tidypress

Components are available in .mdx files without imports.

Callout

Notes, warnings, tips, and pull quotes.

<Callout>The config file lives at `docs/tidypress.config.ts`.</Callout>
 
<Callout type="warning">Do not commit `docs/build/` — it is generated. Deploy it, do not treat it as source.</Callout>
 
<Callout type="tip">Run `tidypress clean` if a build looks stale after upgrading TidyPress.</Callout>
 
<Callout type="quote">The canonical copy lives in git, not in an export workflow.</Callout>

Note

The config file lives at docs/tidypress.config.ts.

Warning

Do not commit docs/build/ — it is generated. Deploy it, do not treat it as source.

Tip

Run tidypress clean if a build looks stale after upgrading TidyPress.

Quote

The canonical copy lives in git, not in an export workflow.

Prop	Type	Default
`type`	`"note" \| "warning" \| "tip" \| "quote"`	`"note"`

Tabs

Alternate commands or examples.

<Tabs labels={["npm", "pnpm"]}>
<Tab>
```bash
npm install -g tidypress
```
</Tab>
<Tab>
```bash
pnpm add -g tidypress
```
</Tab>
</Tabs>

npm install -g tidypress

pnpm add -g tidypress

Prop	Type	Required
`labels`	`string[]`	yes

labels must match the number of direct <Tab> children.

FileTree

Project structure. Folders collapse on click. Wrap important files in ** to highlight them.

<FileTree>
- docs/
  - **tidypress.config.ts**
  - public/
    - images/
  - src/
    - content/
      - docs/
        - getting-started.md
      - writing/
        - hello.md
</FileTree>

docs/
- tidypress.config.ts
- public/
  - images/
- src/
  - content/
    - docs/
      - getting-started.md
    - writing/
      - hello.md

Two spaces per indent level. No props.

Mermaid

Mermaid diagrams.

<Mermaid code={`
flowchart LR
  Markdown[Markdown files] --> Build[tidypress build]
  Build --> Static[Static site]
  Static --> Host[Static host]
`} />
 
<Mermaid align="center" code={`flowchart TB\n  A --> B`} />

Prop	Type	Default	Required
`code`	string	—	yes
`align`	`"left" \| "center" \| "right"`	`"left"`	no

Diagrams adapt when the theme changes. Use align="center" for tall vertical flowcharts in narrow writing columns.

Image

Put images in docs/public/ (for example docs/public/images/flower.jpg). Use the component for captions; use markdown for simple embeds.

<Image src="/images/flower.jpg" alt="Colorful tulips in bloom" caption="Vivid spring flowers" />

Colorful tulips in bloom — Vivid spring flowers

Prop	Type	Required
`src`	`string \| ImageMetadata`	yes
`alt`	string	yes
`caption`	string	no
`width`	number	no
`height`	number	no

Same file with markdown:

![Colorful flowers](/images/flower.jpg)

Short inline definitions.

The <Tooltip tip="Static HTML and search land in docs/build/ after tidypress build.">build folder</Tooltip> is regenerated on each build.

The build folder Static HTML and search land in docs/build/ after tidypress build. is regenerated on each build.

Prop	Type	Required
`tip`	string	yes

Steps

Numbered procedural blocks in MDX. Manual pages use the same components with manual page chrome.

<Steps>
  <Step title="Create content">
    Add markdown under `docs/src/content/docs/`.
  </Step>
  <Step title="Preview locally">
    Run `tidypress dev`.
  </Step>
</Steps>

Create content
Add markdown under docs/src/content/docs/.
Preview locally
Run tidypress dev.

Component	Prop	Type	Required
`Step`	`title`	string	no

Wrap one or more <Step> elements inside <Steps>.

Native details

Native HTML also works:

<details>
<summary>Generated files</summary>
 
```txt
docs/build/
```
 
</details>

Generated files

docs/build/