API

Prose

Rich-text defaults for articles and long-form content.

Installation

pnpmnpmyarnbun

pnpm dlx zazz-ui add prose

npx zazz-ui add prose

yarn dlx zazz-ui add prose

bunx zazz-ui add prose

Run zazz-ui init first if the project has no zazz/ folder yet.

How vexingly quick daft zebras jump.

The Art of Typography

Heading 2

How vexingly quick daft zebras jump.

Heading 3

How vexingly quick daft zebras jump.

Heading 4

How vexingly quick daft zebras jump.

Heading 5

How vexingly quick daft zebras jump.

Heading 6

How vexingly quick daft zebras jump.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.

Elephants crossing a floodplain at dusk — Figure 1: An image and its caption, styled by data-ui="prose"

<article
  data-ui="prose"
  style="
    --py: 8;
    --mx: auto;
    --w: 100%;
    --max-w: var(--article-lg);
  "
>
  <hgroup>
    <span data-ui="text-eyebrow">Heading 1</span>
    <h1>How vexingly quick daft zebras jump.</h1>
    <p data-ui="text-xl" style="--text: var(--color-muted-foreground)">The Art of Typography</p>
  </hgroup>
  <hgroup>
    <span data-ui="text-eyebrow">Heading 2</span>
    <h2>How vexingly quick daft zebras jump.</h2>
  </hgroup>
  <hgroup>
    <span data-ui="text-eyebrow">Heading 3</span>
    <h3>How vexingly quick daft zebras jump.</h3>
  </hgroup>
  <hgroup>
    <span data-ui="text-eyebrow">Heading 4</span>
    <h4>How vexingly quick daft zebras jump.</h4>
  </hgroup>
  <hgroup>
    <span data-ui="text-eyebrow">Heading 5</span>
    <h5>How vexingly quick daft zebras jump.</h5>
  </hgroup>
  <hgroup>
    <span data-ui="text-eyebrow">Heading 6</span>
    <h6>How vexingly quick daft zebras jump.</h6>
  </hgroup>
  <hr />
  <p data-ui="text-xl">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum
    mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis
    dolor.
  </p>
  <p data-ui="text-lg">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum
    mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis
    dolor.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum
    mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis
    dolor.
  </p>
  <p data-ui="text-sm">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum
    mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis
    dolor.
  </p>
  <p data-ui="text-xs">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum
    mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis
    dolor.
  </p>
  <hr />
  <figure>
    <img
      sizes="auto"
      loading="lazy"
      width="800"
      height="400"
      src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?auto=format&fit=crop&w=800&h=400&q=60"
      alt="Elephants crossing a floodplain at dusk"
    />
    <figcaption>Figure 1: An image and its caption, styled by data-ui="prose"</figcaption>
  </figure>
</article>

Prose styles everything inside it. To embed a widget in an article (a form, a menu, a demo) without prose margins and list styles, put data-ui="not-prose" on its wrapper; prose picks up again after it.

<article data-ui="prose">
  <p>Prose styles this paragraph.</p>
  <div data-ui="not-prose">
    <ul><li>But not this list.</li></ul>
  </div>
</article>

Attributes

This primitive is a composition of other primitives and utilities: it has no presets, slots, or hooks of its own. Copy its example and adapt it.

Prose

Installation

Examples

How vexingly quick daft zebras jump.

How vexingly quick daft zebras jump.

How vexingly quick daft zebras jump.

How vexingly quick daft zebras jump.

How vexingly quick daft zebras jump.

How vexingly quick daft zebras jump.

Opting out

Attributes