Prose — ARC UI

Components

Prose

typography

static

<arc-prose>

Overview

Guidelines

When to use

Use Prose for article content, documentation pages, blog posts, and rendered Markdown
Choose the size variant based on reading context — sm for sidebars, md for main content, lg for focused reading
Place semantic HTML directly inside arc-prose as slotted children
Combine with the Markdown component to style rendered Markdown output
Use for any long-form content that includes mixed heading levels, paragraphs, and lists

When not to use

Nest arc-prose inside another arc-prose — a single wrapper is sufficient
Use Prose for UI chrome like navigation, forms, or dashboards — it is designed for reading content
Wrap individual short text snippets in Prose — use the Text component instead
Override slotted element styles with inline styles when token-level customization is available
Use Prose as a substitute for a CSS reset — it specifically targets content typography

Features

Automatic typographic styling for all common HTML elements via ::slotted()
Three size variants (sm, md, lg) for different content density needs
Heading hierarchy with distinct sizes, weights, and spacing for h1–h4
Pretty text wrapping on paragraphs for improved readability
Styled links with accent-colored underlines and smooth hover transitions
Blockquotes with subtle accent background and italic treatment
Code and pre-formatted blocks with monospace font and surface backgrounds
Responsive images with max-width containment and border radius
Full-width tables with collapsed borders and appropriate spacing
Horizontal rules rendered as subtle divider lines
Prefers-reduced-motion support for link transitions

Preview

Getting Started

ARC UI provides a comprehensive set of components for building modern interfaces. Each component follows the design token system for consistent theming.

Install the package from npm
Import the components you need
Apply your theme tokens

Usage

<arc-prose size="md">
  <h1>Article Title</h1>
  <p>Introductory paragraph with <strong>bold text</strong> and <a href="#">links</a>.</p>
  <h2>Section Heading</h2>
  <p>More content with proper typographic rhythm applied automatically.</p>
  <ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ul>
  <blockquote>A styled blockquote with italic treatment.</blockquote>
  <pre>const greeting = 'Hello, world!';</pre>
</arc-prose>

import { Prose } from '@arclux/arc-ui-react';

<Prose size="md">
  <h1>Article Title</h1>
  <p>Introductory paragraph with <strong>bold text</strong> and <a href="#">links</a>.</p>
  <h2>Section Heading</h2>
  <p>More content with proper typographic rhythm applied automatically.</p>
  <ul>
    <li>First item</li>
    <li>Second item</li>
  </ul>
</Prose>

<script setup>
import { Prose } from '@arclux/arc-ui-vue';
</script>

<template>
  <Prose size="md">
    <h1>Article Title</h1>
    <p>Introductory paragraph with <strong>bold text</strong> and <a href="#">links</a>.</p>
    <h2>Section Heading</h2>
    <p>Content with proper typographic rhythm.</p>
  </Prose>
</template>

<script>
  import { Prose } from '@arclux/arc-ui-svelte';
</script>

<Prose size="md">
  <h1>Article Title</h1>
  <p>Introductory paragraph with <strong>bold text</strong> and <a href="#">links</a>.</p>
  <h2>Section Heading</h2>
  <p>Content with proper typographic rhythm.</p>
</Prose>

import { Component } from '@angular/core';
import { Prose } from '@arclux/arc-ui-angular';

@Component({
  imports: [Prose],
  template: `
    <Prose size="md">
      <h1>Article Title</h1>
      <p>Introductory paragraph with <strong>bold text</strong> and <a href="#">links</a>.</p>
      <h2>Section Heading</h2>
      <p>Content with proper typographic rhythm.</p>
    </Prose>
  `,
})
export class MyComponent {}

import { Prose } from '@arclux/arc-ui-solid';

<Prose size="md">
  <h1>Article Title</h1>
  <p>Introductory paragraph with <strong>bold text</strong> and <a href="#">links</a>.</p>
  <h2>Section Heading</h2>
  <p>Content with proper typographic rhythm.</p>
</Prose>

import { Prose } from '@arclux/arc-ui-preact';

<Prose size="md">
  <h1>Article Title</h1>
  <p>Introductory paragraph with <strong>bold text</strong> and <a href="#">links</a>.</p>
  <h2>Section Heading</h2>
  <p>Content with proper typographic rhythm.</p>
</Prose>

API

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Controls the base font size of the prose container. Affects paragraph text; headings and code maintain their own scale.

Overview

Guidelines

When to use

When not to use

Features

Preview

Getting Started

Usage

API

See Also

ARC UI

Arclight