Blocks

Quick reference for the MDX components Tangly ships.

Blocks

Drop these into any .mdx page — no imports needed. Each section shows the source, then the rendered result.

Callouts

mdx

<Note>Heads up — context the reader needs.</Note>
<Tip>An extra suggestion that helps but isn't required.</Tip>
<Warning>Something that can break if ignored.</Warning>
<Info>Neutral aside.</Info>
<Check>Confirmation that something is correct.</Check>
<Danger>Destructive action — be careful.</Danger>

Cards

mdx

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/getting-started">Set up in five minutes.</Card>
  <Card title="API" icon="code" href="/development/openapi">Generated reference.</Card>
</CardGroup>

Quickstart

Set up in five minutes.

API

Generated reference.

Steps

mdx

<Steps>
  <Step title="Install">bun add -d tangly</Step>
  <Step title="Init">tangly init</Step>
  <Step title="Run">tangly dev</Step>
</Steps>

Install

Run bun add -d tangly in your project.
Init

tangly init scaffolds docs.json and a starter page.
Run

tangly dev boots the dev server with HMR.

Tabs

mdx

<Tabs>
  <Tab title="bun">bun add -d tangly</Tab>
  <Tab title="npm">npm i -D tangly</Tab>
</Tabs>

bun add -d tangly

npm i -D tangly

pnpm add -D tangly

Code groups

Stack multiple language variants of the same example. In MDX, write fenced code blocks inside <CodeGroup>:

mdx

<CodeGroup>
```ts hello.ts
console.log("hi")
```

```py hello.py
print("hi")
```
</CodeGroup>

hello.ts

console.log("hi")

hello.py

print("hi")

Accordion

mdx

<AccordionGroup>
  <Accordion title="Why MDX?">Markdown plus components — same readable source, richer output.</Accordion>
  <Accordion title="Why Astro under the hood?">Static-first, zero-JS by default, fast cold reloads.</Accordion>
</AccordionGroup>

Why MDX?

Markdown plus components — same readable source, richer output.

Why Astro under the hood?

Static-first, zero-JS by default, fast cold reloads.

API reference fields

mdx

<ParamField path="userId" type="string" required>
  The user's ID.
</ParamField>
<ResponseField name="email" type="string">
  Contact email.
</ResponseField>

userId string path required

The user’s ID.

email string

Contact email.

Frame

mdx

<Frame caption="Tangly logo">
  ![Tangly](/logo/light.svg)
</Frame>

Tangly logo (drops in any local image; here we link a remote one).

Update

Mark a release entry inline:

mdx

<Update label="v0.2" description="Better code blocks">
  - New copy button + line numbers.
  - Twoslash hovers for TypeScript.
</Update>

v0.2

Better code blocks

New copy button + line numbers.
Twoslash hovers for TypeScript.

Math

Tangly understands KaTeX inline ( $...$ ) and block ($$...$$):

The Pythagorean identity: $a^2 + b^2 = c^2$.

$$
\int_0^\infty e^{-x^2}\,dx = \frac{\sqrt{\pi}}{2}
$$

The Pythagorean identity: $a^2 + b^2 = c^2$ .

\int_0^\infty e^{-x^2}\,dx = \frac{\sqrt{\pi}}{2}

Live docs

Full reference: tangly.dev/guides/components.

Edit this page