Refined Typography and Components
for your MDX Content

## 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
  caption="Juno Captures Jupiter. Credits: NASA/JPL-Caltech/SwRI/MSSS, Thomas Thomopoulos © CC BY"
>
  <Image src="/img/jupiter-cropped.jpg" alt="Planet Jupiter" />
</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>

## Code block
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>
}
```

## 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" caption="A comparison of three modern super-heavy-lift launch vehicles">
| 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                      |
</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" caption="Examples of Prose UI design tokens">
| 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.        |
</Frame>