Components overview

MDX-ready components for documentation and content sites.

With Prose UI, we aimed to follow the default GitHub Flavored Markdown syntax as closely as possible and avoid introducing new syntax for unsupported features.

Instead of creating custom syntax, we provide React components that you can use within your MDX code to add functionality not natively supported by Markdown.

For example, to add an image caption and center an image, you can use the Frame and Image React components we provide:

<Frame align="center">
   <Image src="/img/image.png" alt="Abstract art"/>
   <Caption>Center aligned image</Caption>
</Frame>

Check out the following resources to get started with Prose UI typography and components:

Typography

Style headings, paragraphs, and links with Prose UI.

Open

Image

Display, resize, and align images using Image and Frame components.

Open

Callout

Highlight key information with callout boxes.

Open

Card

Build quick navigation and highlight related resources.

Open

Table

Create and style tables for technical content.

Open

Steps

Present sequential flows with numbered or icon badges.

Open

Frame

Add captions and align content with the Frame component.

Open

Link

Use next/link for seamless navigation.

Open