Usage

Basic usage example to quickly see how the Prose component works. This demonstration provides a simple introduction to how Prose handles rendering rich text content with consistent typography and formatting.

🌊🏴‍☠️

The Great Pirate Era

Gol D. Roger's Final Words

A Legacy of Adventure

The Straw Hat Pirates

What Makes Luffy Unstoppable?

It all began with Gol D. Roger, the Pirate King, whose final words set the seas ablaze with ambition: "My treasure? It's yours if you want it. I left everything I gathered in one place. Now you just have to find it!" This declaration created the Great Pirate Era, where countless adventurers set sail to find the legendary One Piece.

Among them is Monkey D. Luffy, a boy with a dream to become the next Pirate King. With his trusty straw hat, gifted by the legendary Shanks, and the power of the Gomu Gomu no Mi, Luffy is destined to change the world. Alongside his diverse and loyal crew, they face challenges, explore mysterious islands, and uncover secrets of the world’s history.

The journey isn’t easy. Each step requires bravery, camaraderie, and perseverance. From battling the ruthless Warlords of the Sea to confronting the secrets of the Void Century, the Straw Hat Pirates remain undeterred. Here’s a glimpse of their remarkable story:

import { Prose } from "@/ui/prose";

// Used for syntax highlighting
const html = String.raw;

const content = html`
  <h1>🌊🏴‍☠️</h1>
  <h1>The Great Pirate Era</h1>
  <h2>Gol D. Roger's Final Words</h2>
  <h3>A Legacy of Adventure</h3>
  <h4>The Straw Hat Pirates</h4>

  <h5>What Makes Luffy <a href="">Unstoppable</a>?</h5>

  <p>
    It all began with <a href="">Gol D. Roger</a>, the Pirate King, whose final words set the seas ablaze with ambition: "My treasure? It's yours if you want
    it. I left everything I gathered in one place. Now you just have to find it!" This declaration created the Great Pirate Era, where countless adventurers set
    sail to find the legendary <strong>One Piece</strong>.
  </p>

  <p>
    Among them is Monkey D. Luffy, a boy with a dream to become the next Pirate King. With his trusty straw hat, gifted by the legendary Shanks, and the power
    of the <code>Gomu Gomu no Mi</code>, Luffy is destined to change the world. Alongside his diverse and loyal crew, they face challenges, explore mysterious
    islands, and uncover secrets of the world’s history.
  </p>

  <hr />

  <p>
    The journey isn’t easy. Each step requires bravery, camaraderie, and perseverance. From battling the ruthless <strong>Warlords of the Sea</strong> to
    confronting the secrets of the <em>Void Century</em>, the Straw Hat Pirates remain undeterred. Here’s a glimpse of their remarkable story:
  </p>
`;

export function ProseDemo() {
  return <Prose __html={content} />;
}

Peer Dependencies

Install required peer dependency for content sanitization.

pnpm add dompurify@latest

npm install dompurify@latest

yarn add dompurify@latest

bun add dompurify@latest

dompurify is used internally to safely sanitize HTML content to prevent XSS (Cross-Site Scripting) attacks when rendering user-generated HTML.

Blockquote

Demonstration of rendering blockquote elements inside Prose. This example shows how the Prose component styles and formats blockquote content consistently.

Quotes

"If you don’t take risks, you can’t create a future." - Monkey D. Luffy

And it can span into multiple lines:

"Inherited will, the swelling of the changing times, and the dreams of people, these are things that cannot be stopped. As long as people continue to seek the meaning of freedom, these things will never cease to be!" - Gol D. Roger

list 1
list 2
list 3

There's also strong, courage, and determination in their journey! But, let's display some challenges!

import { Prose } from "@/ui/prose";

// Used for syntax highlighting
const html = String.raw;

const content = html`
  <h3>Quotes</h3>
  <blockquote>"If you don’t take risks, you can’t create a future." - Monkey D. Luffy</blockquote>
  <p>And it can span into multiple lines:</p>
  <blockquote>
    "Inherited will, the swelling of the changing times, and the dreams of people, these are things that cannot be stopped. As long as people continue to seek
    the meaning of freedom, these things will never cease to be!" - Gol D. Roger
  </blockquote>
  <li>
    <ul>
      <li>list 1</li>
      <li>list 2</li>
      <li>list 3</li>
    </ul>
  </li>
  <p>
    There&apos;s also <strong>strong</strong>, <b>courage</b>, and <em>determination</em> in their journey! But, let&apos;s display some
    <code>challenges!</code>
  </p>
`;

export function ProseBlockquoteDemo() {
  return <Prose __html={content} />;
}

List

Demonstration of rendering ordered and unordered lists inside Prose. This section showcases the default list styling when lists are rendered inside a Prose block.

Mugiwara Crew

The core members of the Straw Hat Pirates:

Monkey D. Luffy - The Captain
Roronoa Zoro - The Swordsman
Nami - The Navigator
Usopp - The Sniper
Sanji - The Cook
Tony Tony Chopper - The Doctor
Nico Robin - The Archaeologist
Franky - The Shipwright
Brook - The Musician
Jinbe - The Helmsman

Their ultimate goals:

Find the legendary One Piece.
Overcome these sub-challenges:
1. Gathering enough supplies for the journey.
2. Recruiting allies to their cause.
3. Surviving the harshest seas in the world.
Unravel the mysteries of the Void Century.
Face incredible challenges to achieve this:
1. Decipher the Poneglyphs.
2. Confront the guardians of the ancient secrets.
3. Protect Robin, the only one capable of reading the ancient language.
Overthrow the oppressive World Government.
This requires:
1. Defeating the Admirals.
2. Disbanding the Celestial Dragons’ grip on power.
3. Unleashing true freedom to the people of the world.

import { Prose } from "@/ui/prose";

// Used for syntax highlighting
const html = String.raw;

const content = html`
  <h3>Mugiwara Crew</h3>
  <p>The core members of the Straw Hat Pirates:</p>
  <ul>
    <li>Monkey D. Luffy - The Captain</li>
    <li>Roronoa Zoro - The Swordsman</li>
    <li>Nami - The Navigator</li>
    <li>Usopp - The Sniper</li>
    <li>Sanji - The Cook</li>
    <li>Tony Tony Chopper - The Doctor</li>
    <li>Nico Robin - The Archaeologist</li>
    <li>Franky - The Shipwright</li>
    <li>Brook - The Musician</li>
    <li>Jinbe - The Helmsman</li>
  </ul>
  <p>Their ultimate goals:</p>
  <ol>
    <li>Find the legendary One Piece.</li>
    <li>
      Overcome these sub-challenges:
      <ol>
        <li>Gathering enough supplies for the journey.</li>
        <li>Recruiting allies to their cause.</li>
        <li>Surviving the harshest seas in the world.</li>
      </ol>
    </li>
    <li>Unravel the mysteries of the Void Century.</li>
    <li>
      Face incredible challenges to achieve this:
      <ol>
        <li>Decipher the Poneglyphs.</li>
        <li>Confront the guardians of the ancient secrets.</li>
        <li>Protect Robin, the only one capable of reading the ancient language.</li>
      </ol>
    </li>
    <li>Overthrow the oppressive World Government.</li>
    <li>
      This requires:
      <ol>
        <li>Defeating the Admirals.</li>
        <li>Disbanding the Celestial Dragons’ grip on power.</li>
        <li>Unleashing true freedom to the people of the world.</li>
      </ol>
    </li>
  </ol>
`;

export function ProseListDemo() {
  return <Prose __html={content} />;
}

List Inside

Demonstration of styling nested or inner lists. This example highlights how inner lists (lists inside list items) are automatically styled and indented appropriately.

Unordered List

Unordered List 1:
- Unordered Inside 1-1
- Unordered Inside 1-2
Unordered List 2:
- Unordered Inside 2-1:
  - Unordered Inside 2-1-1
  - Unordered Inside 2-1-2
- Unordered Inside 2-2:
  - Unordered Inside 2-2-1
  - Unordered Inside 2-2-2
  - Unordered Inside 2-2-3:
    - Unordered Inside 2-2-3-1
    - Unordered Inside 2-2-3-2

Ordered List

Ordered List 1:
1. Ordered Inside 1-A
2. Ordered Inside 1-B
Ordered List 2:
1. Ordered Inside 2-A:
  1. Ordered Inside 2-A-I
  2. Ordered Inside 2-A-II
2. Ordered Inside 2-B:
  1. Ordered Inside 2-B-I
  2. Ordered Inside 2-B-II
  3. Ordered Inside 2-B-III:
    1. Ordered Inside 2-B-III-a
    2. Ordered Inside 2-B-III-b
    3. Ordered Inside 2-B-III-c:
      1. Ordered Inside 2-B-III-c-i
      2. Ordered Inside 2-B-III-c-ii
      3. Ordered Inside 2-B-III-c-iii:
        
        Ordered Inside 2-B-III-c-iii
        
        Ordered Inside 2-B-III-c-iii

import { Prose } from "@/ui/prose";

// Used for syntax highlighting
const html = String.raw;

const content = html`
  <h3>Unordered List</h3>
  <ul style="font-weight: 500;">
    <li>
      Unordered List 1:
      <ul>
        <li>Unordered Inside 1-1</li>
        <li>Unordered Inside 1-2</li>
      </ul>
    </li>
    <li>
      Unordered List 2:
      <ul>
        <li>
          Unordered Inside 2-1:
          <ul>
            <li>Unordered Inside 2-1-1</li>
            <li>Unordered Inside 2-1-2</li>
          </ul>
        </li>
        <li>
          Unordered Inside 2-2:
          <ul>
            <li>Unordered Inside 2-2-1</li>
            <li>Unordered Inside 2-2-2</li>
            <li>
              Unordered Inside 2-2-3:
              <ul>
                <li>Unordered Inside 2-2-3-1</li>
                <li>Unordered Inside 2-2-3-2</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

  <hr />

  <h3>Ordered List</h3>
  <ol style="font-weight: 500;">
    <li style="color: #e54d2e;">
      Ordered List 1:
      <ol>
        <li>Ordered Inside 1-A</li>
        <li>Ordered Inside 1-B</li>
      </ol>
    </li>
    <li style="color: #e54666;">
      Ordered List 2:
      <ol>
        <li>
          Ordered Inside 2-A:
          <ol>
            <li>Ordered Inside 2-A-I</li>
            <li>Ordered Inside 2-A-II</li>
          </ol>
        </li>
        <li style="color: #d6409f;">
          Ordered Inside 2-B:
          <ol>
            <li>Ordered Inside 2-B-I</li>
            <li>Ordered Inside 2-B-II</li>
            <li style="color: #8e4ec6;">
              Ordered Inside 2-B-III:
              <ol>
                <li>Ordered Inside 2-B-III-a</li>
                <li>Ordered Inside 2-B-III-b</li>
                <li style="color: #5b5bd6;">
                  Ordered Inside 2-B-III-c:
                  <ol>
                    <li>Ordered Inside 2-B-III-c-i</li>
                    <li>Ordered Inside 2-B-III-c-ii</li>
                    <li style="color: #0090ff;">
                      Ordered Inside 2-B-III-c-iii:
                      <ol>
                        <li>Ordered Inside 2-B-III-c-iii</li>
                        <li>Ordered Inside 2-B-III-c-iii</li>
                      </ol>
                    </li>
                  </ol>
                </li>
              </ol>
            </li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
`;

export function ProseListInsideDemo() {
  return <Prose __html={content} />;
}

Table

Demonstration of rendering and styling tables within Prose. This example shows the default appearance of table elements (headers, rows, cells) inside a Prose container.

Allies

Here are some of their notable allies and their roles:

Name	Role	Affiliation
Shanks	Mentor	Red-Haired Pirates
Portgas D. Ace	Brother	Whitebeard Pirates
Boa Hancock	Ally	Kuja Pirates
Dracule Mihawk	Trainer	Warlord of the Sea

import { Prose } from "@/ui/prose";

// Used for syntax highlighting
const html = String.raw;

const content = html`
  <h3>Allies</h3>
  <p>Here are some of their notable allies and their roles:</p>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Role</th>
        <th>Affiliation</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Shanks</td>
        <td>Mentor</td>
        <td>Red-Haired Pirates</td>
      </tr>
      <tr>
        <td>Portgas D. Ace</td>
        <td>Brother</td>
        <td>Whitebeard Pirates</td>
      </tr>
      <tr>
        <td>Boa Hancock</td>
        <td>Ally</td>
        <td>Kuja Pirates</td>
      </tr>
      <tr>
        <td>Dracule Mihawk</td>
        <td>Trainer</td>
        <td>Warlord of the Sea</td>
      </tr>
    </tbody>
  </table>
`;

export function ProseTableDemo() {
  return <Prose __html={content} />;
}

Properties

Interactive configurator to explore customization options for the Prose component. Customize typographic scales, colors, spacing, and other formatting aspects directly via the live configurator.

Title Heading 1

Title Heading 2

Title Heading 3

Title Heading 4

Title Heading 5

Title Heading 6

Exploring the Universe of Web Development

Web development is a vast and ever-evolving field. Whether you are crafting your first website or optimizing complex applications, staying updated with the latest trends is essential. The rise of frameworks like React, Vue, and Svelte has changed how we approach building web interfaces. Remember, the journey of mastering web development begins with a single line of code. Press Ctrl + S to save your progress and keep moving forward.

Building Blocks of Innovation

Imagine a world where every click, scroll, and interaction is seamless. As developers, we have the power to create experiences that inspire and empower. By combining design principles with functional programming, we can build websites that are both aesthetic and performant. The possibilities are endless.

Stay Curious, Keep Learning

Challenges will arise, but every error is an opportunity to grow. Debugging is a skill that sharpens with practice. Never be afraid to experiment with new ideas, break things, and rebuild them better than before.

Blockquotes

"The best way to predict the future is to invent it."
— Alan Kay

Inspiration can often come from unexpected places:

"Success is not the key to happiness. Happiness is the key to success. If you love what you are doing, you will be successful."
— Albert Schweitzer

Remember, you can also emphasize text with strong, bold, or italics to make your message stand out!

Lists

Here are some essential skills for web developers:

HTML, CSS, and JavaScript
Version control with Git
Responsive design principles

And here are some goals to aim for:

Build a portfolio website
Contribute to open-source projects
Learn server-side programming

Tables

Meet some influential figures in the web development community:

Name	Contribution	GitHub Profile
Dan Abramov	React Core Developer	gaearon
Evan You	Creator of Vue.js	yyx990803
Rich Harris	Creator of Svelte	Rich-Harris
Lea Verou	CSS Expert and Advocate	LeaVerou

Color

Size

Dir

API References

Styles API

Styles API	Type	Default	Annotation
__html`?`	`string \| TrustedHTML`	`undefined`	processing input using `dompurify`

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.

prose.tsx

globals.css

/* prose */ @layer base { .stylelayer-prose { @apply [--fz-h1:clamp(2rem,1rem+4vw,2.75rem)] [--fz-h2:clamp(1.25rem,0.75rem+4vw,2.25rem)] [--fz-h3:clamp(1.125rem,11px+3.5vw,1.875rem)] [--fz-h4:clamp(1.1875rem,0.75rem+3vw,1.5rem)] [--fz-h5:clamp(1rem,0.75rem+2vw,1.25rem)] [--fz-h6:clamp(0.9375rem,0.75rem+2vw,1.125rem)] [--fz-base:1rem] [--fz-sm:0.875rem]; &[data-prose-size="lg"] { @apply [--prose-scale:1] [--prose-heading-scale:1]; } &[data-prose-size="md"] { @apply [--prose-scale:0.975] [--prose-heading-scale:0.95]; } &[data-prose-size="sm"] { @apply [--prose-scale:0.925] [--prose-heading-scale:0.85]; } &[data-prose-color="muted"] { & p, & h5, & h6, & blockquote { @apply text-muted-foreground; } & p a { @apply text-blue-600; } & ol, & ul, & menu { @apply text-muted-foreground marker:text-color; } & table { & tr { @apply border-b-border; & th { @apply bg-muted/60; } & td { @apply text-muted-foreground; } } & thead { &::after { @apply bg-muted; } & tr { @apply border-b-muted; } } & tbody { & tr { &:hover, &:hover th, &:hover td { @apply bg-muted/30; } } } } } & h1 { @apply scroll-m-20 text-[calc(var(--fz-h1)*var(--prose-heading-scale))] leading-[calc(clamp(2rem,1rem+4vw,4.25rem)*var(--prose-heading-scale))] font-extrabold tracking-tight; } & h2 { @apply scroll-m-20 text-[calc(var(--fz-h2)*var(--prose-heading-scale))] font-bold tracking-tight pb-2 first:mt-0; } & h3 { @apply scroll-m-20 text-[calc(var(--fz-h3)*var(--prose-heading-scale))] leading-9 font-bold tracking-normal; } & h4 { @apply scroll-m-20 text-[calc(var(--fz-h4)*var(--prose-heading-scale))] leading-7 font-semibold tracking-tight; } & h5 { @apply scroll-m-20 text-[calc(var(--fz-h5)*var(--prose-heading-scale))] leading-6 font-medium tracking-tight; } & h6 { @apply scroll-m-20 text-[calc(var(--fz-h6)*var(--prose-heading-scale))] leading-4 font-medium tracking-tight; } & label { @apply mr-auto w-full text-[calc(var(--fz-sm)*var(--prose-scale))] text-muted-foreground rtl:ml-auto rtl:mr-0; } & p { @apply text-[calc(var(--fz-base)*var(--prose-scale))] leading-7 [&:empty:not(:only-child)]:hidden; } & p + p, & label ~ label { @apply mt-4; } & span { @apply mt-1 w-full text-start text-[calc(var(--fz-sm)*var(--prose-scale))] text-muted-foreground first-of-type:mt-8; } & code { @apply text-[calc(var(--fz-sm)*var(--prose-scale))] relative rounded bg-muted/60 border border-solid border-border px-[0.3rem] py-[0.2rem] font-mono font-medium; } & kbd { @apply whitespace-pre-line text-[calc(var(--fz-sm)*var(--prose-scale))] rounded py-[calc(.15em*1)] px-[calc(.35em*1)] [--shadow:hsl(var(--border))] [box-shadow:0_0_0_.0625em_var(--shadow),0_.09375em_0_.0625em_var(--shadow)]; } & em { @apply italic; } & a { @apply text-blue-500 hover:underline underline-offset-2; } & p a { @apply underline decoration-muted hover:decoration-blue-500; } & blockquote { @apply my-5 text-[calc(var(--fz-base)*var(--prose-scale))] border-l-4 pl-6 rtl:border-l-0 rtl:pl-0 rtl:border-r-4 rtl:pr-6 italic; } & hr { @apply my-3 h-0 w-full border-t border-solid border-border; } & mark { @apply block rounded data-[mark=true]:bg-[#6cc4d2] data-[mark=false]:bg-[#e54b4b]; } & ol, & ul, & menu { @apply my-5 ml-5 pl-5 rtl:ml-0 rtl:pl-0 rtl:mr-5 rtl:pr-5 marker:font-normal text-[calc(var(--fz-base)*var(--prose-scale))]; } & ol { @apply [list-style:decimal_outside] rtl:[list-style:arabic-indic_outside] [&:has(+ul)]:mb-0 [&:has(+ul)+ul]:my-0 [&:has(+ul)+ul]:ml-10; } & ul { @apply [list-style:disc_outside]; } & ul li, & ol li, & menu li { @apply list-item mt-2 [text-align:-webkit-match-parent] [unicode-bidi:isolate] leading-normal [&:empty:not(:only-child)]:hidden; &:has(ul, ol, menu) { @apply whitespace-normal; } } & li:not(ul li, ol li, menu li) { @apply hidden; } & li ul, & li ol, & li menu { @apply my-0 ml-0 rtl:mr-0; } & ol > li > ol { @apply [list-style-type:upper-alpha]; & > li > ol { @apply [list-style-type:upper-roman]; & > li > ol { @apply [list-style-type:lower-alpha]; & > li > ol { @apply [list-style-type:lower-roman]; & > li > ol { @apply [list-style-type:disc]; } } } } } & table { @apply w-full caption-bottom text-[calc(var(--fz-base)*var(--prose-scale))] text-left rtl:text-right; & thead { @apply relative; &::after { @apply content-[''] absolute z-[4] w-full h-px bg-border bottom-[3px] inset-x-0; } } & tr { @apply border-b border-b-border appearance-none; & th, & td { @apply pl-3 pr-3 first:pl-4 font-geist-sans last:pr-4; &:first-child { @apply sticky left-0 z-[2]; } } & th { @apply py-[10px] h-12 bg-background font-semibold align-middle text-color [&:has([role=checkbox])]:pr-0; } & td { @apply py-4 bg-background; } } & tbody { & tr { @apply last:border-b-0 relative; &:hover, &:hover th, &:hover td { @apply bg-muted/60; } & td[data-sr-only] { @apply hidden sr-only; } & td { & code { @apply whitespace-nowrap; } } & td[data-value="true"] { @apply relative z-[99] p-4 align-middle [&:has([role=checkbox])]:pr-0 min-w-max truncate whitespace-nowrap; & time { @apply w-full flex flex-nowrap flex-row items-center justify-end gap-2 text-[#888]; & svg { @apply w-[--sz] min-w-[--sz] h-[--sz] min-h-[--sz] [--sz:calc(var(--fz-base)*var(--prose-scale))]; } } & time:nth-child(2) { @apply text-[13px]; } } } & tr:empty:not(:only-child) { @apply border-b border-b-border data-[state=selected]:bg-muted; & td:empty:not(:only-child) { @apply py-4 px-4 whitespace-pre-line align-middle [&:has([role=checkbox])]:pr-0 min-w-max truncate h-24 text-center; } } } } & :where(:is(h1, h2, h3, h4, h5, h6)):not(:is([data-demo-area] :is(h1, h2, h3, h4, h5, h6))) { @apply text-color [&:not(:first-of-type)]:mt-9 mb-1 flex items-center cursor-default [&>a>svg]:hover:text-blue-500 max-w-full; & a { & code { @apply [--p-code:0rem_0.5rem] [--round-code:.4375rem]; } & svg { @apply absolute left-0 rtl:left-auto rtl:right-0; } } } & :where(:is(h1, h2, h3, h4, h5, h6)) { & a.anchor_id { @apply font-geist-sans [--sz:18px] [&_svg]:min-w-[--sz] [&_svg]:min-h-[--sz] [&_svg]:size-[--sz] [&_svg]:max-w-[--sz] [&_svg]:max-h-[--sz] [&_svg]:transition-colors [&_svg]:text-color/30 [&_svg]:hover:text-blue-500; &:has(img + svg) { @apply flex-row-reverse [&>img]:-ml-8 [&>img]:mr-4 [&>svg]:hidden; } } & + hr { @apply my-0 h-px; } & + hr + p { @apply [&:not(:first-child)]:mt-6; } } } }