Beautiful styling and components
for Markdown prose

## Images

Prose UI converts your images to Next.js images, offering benefits like preventing layout shifts and enabling a blur effect during loading.
The [Frame](/docs/components/frame) component allows you to add a caption and align images and tables.

This stunning image is from [NASA's Juno mission](https://science.nasa.gov/mission/juno).

<Frame>
  <Image src="/img/jupiter-cropped.jpg" alt="Planet Jupiter" />
  <Caption>Juno Captures Jupiter. Credits: NASA/JPL-Caltech/SwRI/MSSS, Thomas Thomopoulos © CC BY</Caption>
</Frame>

## Typography

Achieve a harmonious rhythm and visually appealing design for all typographic elements. Prose UI ensures consistent, beautiful styles out of the box, letting you focus on building your site. Need a personal touch? Customize virtually every detail with [CSS variables](/docs/styling).


> In October 2024, NASA’s Europa Clipper departed to assess Europa’s habitability, while Japan’s wooden LignoSat reached the ISS to test timber for space structures.

Space Exploration Highlights:
- International Space Station (ISS)
- Mars rover missions
- Deep space telescopes

Rocket Launch Steps:
1. Assembly of the rocket stages
2. Launching the payload into orbit
3. Conducting scientific experiments in microgravity

## Callouts

Highlight important information with beautifully styled callout components.

<Callout variant="info" title="Info">
  Use for general information or helpful insights.
</Callout>

<Callout variant="note" title="Note">
  Perfect for adding additional context or side notes.
</Callout>

<Callout variant="tip" title="Tip">
  Great for quick tips, best practices, or suggestions.
</Callout>

<Callout variant="warning" title="Warning">
  Use to caution users about potential issues.
</Callout>

<Callout variant="danger" title="Danger">
  Highlight critical errors or serious warnings.
</Callout>

## Cards

Highlight navigation targets and key links with the Card component. Cards support icons, CTAs, arrows, and a horizontal layout for compact link rows.

<Card
  title="Read the docs"
  icon="book-open"
  href="/docs"
  cta="Open docs"
  horizontal
  arrow="true"
>
  Get started with installation, configuration, and component guides.
</Card>

<Columns columns={3}>
  <Card title="Components" icon="shapes" href="/docs/components/overview" cta="Explore" arrow="true">
    Browse every MDX-ready component in Prose UI.
  </Card>
  <Card title="Styling" icon="sparkles" href="/docs/styling" cta="Customize" arrow="true">
    Tune design tokens and CSS variables to match your brand.
  </Card>
  <Card title="Math & code" icon="code" href="/docs/components/math" cta="View examples" arrow="true">
    See how math, code, and tables render with Prose UI.
  </Card>
</Columns>

## Steps

Guide readers through sequential actions with numbered badges or [Lucide](https://lucide.dev) icons.

<Steps titleSize="base">
  <Step title="Plot a course">Lock coordinates on the nebula gate.</Step>
  <Step title="Power the boosters">
    Spin up thrusters until the orbit holds steady.
  </Step>
  <Step title="Break orbit" icon="rocket">
    Punch it and ride the plume past the exosphere.
  </Step>
</Steps>

## Code blocks
Prose UI brings Shiki-powered syntax highlighting to your code snippets, making them look clean and professional.

Code blocks also support line numbers, titles, and customizable styles with CSS variables.

```tsx title="my-component.tsx" showLineNumbers
const MyComponent = () => {
  return <div>Hello Universe</div>
}
```

## Code groups
Code groups display multiple code blocks as tabs, perfect for showing installation commands or the same code in different languages.

Use the same title with different languages to enable language switching.

<CodeGroup groupId="example">

```typescript title='Server'
const app: Express = express()
app.use(cors({ origin: '*' }))
app.listen(3000, () => console.log('Ready'))
```

```javascript title='Server'
const app = express()
app.use(cors({ origin: '*' }))
app.listen(3000, () => console.log('Ready'))
```

```typescript title='Client'
const res = await fetch('/api/data')
const data: User[] = await res.json()
console.log(data)
```

```javascript title='Client'
const res = await fetch('/api/data')
const data = await res.json()
console.log(data)
```

</CodeGroup>

Try changing the language or tab above - the code group below will sync automatically:

<CodeGroup groupId="example">

```typescript title='Server'
function greet(name: string) {
  return `Hello, ${name}!`
}

const message = greet('World')
console.log(message)
```

```javascript title='Server'
function greet(name) {
  return `Hello, ${name}!`
}

const message = greet('World')
console.log(message)
```

```typescript title='Client'
const client: Client = createClient()
client.connect()
```

```javascript title='Client'
const client = createClient()
client.connect()
```

</CodeGroup>

## Math formulas

Prose UI supports inline and block math formulas using LaTeX syntax. Formulas are rendered using KaTeX, providing beautiful mathematical notation.

### Inline math

Use single dollar signs `$...$` for inline math formulas that appear within a paragraph.

The quadratic formula is $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$ for solving equations.

The famous equation $E = mc^2$ relates energy and mass. Another example: $F = ma$ represents Newton's second law of motion.

### Block math

Use double dollar signs `$$...$$` on separate lines for block math formulas that appear as standalone, centered equations.

The quadratic formula:

$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$

Integral notation:

$$
\int_{a}^{b} f(x) \, dx = F(b) - F(a)
$$

## Tables

Prose UI fully supports [GFM tables](https://github.github.com/gfm/#tables-extension-), making it easy to present structured data with clarity and style. 

By wrapping your table in the [Frame](/docs/components/frame) component, you can add captions and adjust alignment.

<Frame align="stretch">

| Rocket                | Height   | Payload to LEO | Stages | Manufacturer                     |
|:----------------------|:--------:|:--------------:|:------:|:---------------------------------|
| SpaceX Starship       | 120 m    | 150 t          | 2      | SpaceX                           |
| NASA SLS Block 1      | 98 m     | 95 t           | 2      | NASA (Boeing as prime contractor)|
| Blue Origin New Glenn | 98 m     | 45 t           | 2      | Blue Origin                      |

<Caption>A comparison of three modern super-heavy-lift launch vehicles</Caption>
</Frame>

## Styling

Prose UI [styling](/docs/styling) is structured around a set of design tokens that create a consistent visual language.

The tokens are exposed as CSS variables, enabling you to customize your MDX content's styling by overriding them.

<Frame align="stretch">

| Token                         | Default       | Description                             |
|:------------------------------|:--------------|:----------------------------------------|
| `--p-font-size`               | `1rem`        | Core token for the base font size.      |
| `--p-h2-letter-spacing`       | `-0.035rem`   | Letter spacing of the `h2` heading.     |
| `--p-frame-caption-font-style`| `italic`      | Font style of the frame caption.        |

<Caption>Examples of Prose UI design tokens</Caption>
</Frame>