Prose

A typography component that renders rich text content in a structured and readable format.
For more information on this component configuration, visit Tailwind .

A quieter way to build digital products

Good design is rarely about adding more. It is about understanding what matters, removing what does not, and creating enough space for the right ideas to stand out.

The best interfaces do not ask for attention. They earn it.

What we focus on

Interfaces that feel natural across every screen size.

Installation

In order to use the Prose component, you need to install the Tailwind CSS Typography plugin:


pnpm add -D @tailwindcss/typography

Add the Tailwind Prose styles to your main CSS file:


/** main.css */
@import 'tailwindcss';
@plugin '@tailwindcss/typography';

Sizes

Use the prose-{size} class to control the component size.

Size values can include:smbaselgxl.

A quieter way to build digital products

Good design is rarely about adding more. It is about understanding what matters, removing what does not, and creating enough space for the right ideas to stand out.

The best interfaces do not ask for attention. They earn it.

What we focus on

Interfaces that feel natural across every screen size.

A quieter way to build digital products

Good design is rarely about adding more. It is about understanding what matters, removing what does not, and creating enough space for the right ideas to stand out.

The best interfaces do not ask for attention. They earn it.

What we focus on

Interfaces that feel natural across every screen size.

A quieter way to build digital products

Good design is rarely about adding more. It is about understanding what matters, removing what does not, and creating enough space for the right ideas to stand out.

The best interfaces do not ask for attention. They earn it.

What we focus on

Interfaces that feel natural across every screen size.

A quieter way to build digital products

Good design is rarely about adding more. It is about understanding what matters, removing what does not, and creating enough space for the right ideas to stand out.

The best interfaces do not ask for attention. They earn it.

What we focus on

Interfaces that feel natural across every screen size.

Customizing

globals.css


:root {
  --ex-prose-opacity: var(--ex-options-opacity-muted);
 
  --ex-prose-font-size-sm: var(--text-xs);
  --ex-prose-font-size-md: var(--text-sm);
  --ex-prose-font-size-lg: var(--text-base);
  --ex-prose-font-size-xl: var(--text-lg);
 
  --ex-prose-line-height-sm: var(--text-xs--line-height);
  --ex-prose-line-height-md: var(--text-sm--line-height);
  --ex-prose-line-height-lg: var(--text-base--line-height);
  --ex-prose-line-height-xl: var(--text-lg--line-height);
 
  --ex-prose-font-family-sm: var(--font-sans);
  --ex-prose-font-family-md: var(--font-sans);
  --ex-prose-font-family-lg: var(--font-sans);
  --ex-prose-font-family-xl: var(--font-sans);
 
  --ex-prose-font-weight-sm: var(--font-weight-normal);
  --ex-prose-font-weight-md: var(--font-weight-normal);
  --ex-prose-font-weight-lg: var(--font-weight-normal);
  --ex-prose-font-weight-xl: var(--font-weight-normal);
}

API

Element	Selector
`Prose`	`.ex-prose`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`