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 component allows you to add a caption and align images and tables.

This stunning image is from NASA's Juno mission.

Typography

Harmonious rhythm and visually appealing design for all typographic elements.

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.

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.

Steps

Guide readers through sequential actions with numbered badges or Lucide icons.

1. Plot a course

   Lock coordinates on the nebula gate.

2. Power the boosters

   Spin up thrusters until the orbit holds steady.

3. Break orbit

   Punch it and ride the plume past the exosphere.

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.

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.

Tabs

Swap between related panels without losing context.

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, making it easy to present structured data with clarity and style.

By wrapping your table in the Frame component, you can add captions and adjust alignment.

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

Styling

Prose UI 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.

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.