Renders markdown strings into styled HTML with design system prose styling, supporting headings, lists, code blocks, and more.

Basic

Renders markdown strings into styled HTML with design system prose styling. Supports headings, bold, italic, inline code, code blocks, links, lists, blockquotes, horizontal rules, and images — all without external markdown libraries.

Hello World

Some bold and italic text with inline code.

First item
Second item
Third item

A blockquote for emphasis.

const greeting = "Hello!";
console.log(greeting);

<Markdown content={`
# Hello World

Some **bold** and _italic_ text with \`inline code\`.

- First item
- Second item
- Third item

> A blockquote for emphasis.

\`\`\`tsx
const greeting = "Hello!";
console.log(greeting);
\`\`\`
`} />

<Markdown content={`# Hello WorldSome **bold** and _italic_ text with \`inline code\`.- First item- Second item- Third item> A blockquote for emphasis.\`\`\`tsxconst greeting = "Hello!";console.log(greeting);\`\`\``} />

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add markdown

pnpm dlx @work-rjkashyap/unified-ui add markdown

npx @work-rjkashyap/unified-ui add markdown

bunx @work-rjkashyap/unified-ui add markdown

If you haven't initialized your project yet, run npx @work-rjkashyap/unified-ui init first. See the CLI docs for details.

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import {
	Markdown,
	Badge,
	Button,
} from "@work-rjkashyap/unified-ui";

Examples

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<Markdown content={`
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
`} />

<Markdown content={`# Heading 1## Heading 2### Heading 3#### Heading 4##### Heading 5###### Heading 6`} />

Inline Formatting

This is bold text and this is italic text.

You can also use underscores for bold and underscores for italic.

Here's some ~~strikethrough text~~ for deletions.

Use inline code for technical terms.

Visit Unified UI for more info.

<Markdown content={`
This is **bold text** and this is _italic text_.

You can also use **underscores for bold** and _underscores for italic_.

Here's some ~~strikethrough text~~ for deletions.

Use \`inline code\` for technical terms.

Visit [Unified UI](https://example.com) for more info.
`} />

<Markdown content={`This is **bold text** and this is _italic text_.You can also use **underscores for bold** and _underscores for italic_.Here's some ~~strikethrough text~~ for deletions.Use \`inline code\` for technical terms.Visit [Unified UI](https://example.com) for more info.`} />

Lists

Unordered List

First item with bold
Second item with code
Third item with a link

Ordered List

Install the package
Import the component
Pass your markdown string
Enjoy styled output

<Markdown content={`
### Unordered List
- First item with **bold**
- Second item with \`code\`
- Third item with a [link](https://example.com)

### Ordered List

1. Install the package
2. Import the component
3. Pass your markdown string
4. Enjoy styled output
`} />

<Markdown content={`### Unordered List- First item with **bold**- Second item with \`code\`- Third item with a [link](https://example.com)### Ordered List1. Install the package2. Import the component3. Pass your markdown string4. Enjoy styled output`} />

Blockquotes

Design is not just what it looks like and feels like. Design is how it works.

Code is read much more often than it is written. Write for readability first.

<Markdown content={`
> Design is not just what it looks like and feels like. Design is how it works.

> Code is read much more often than it is written. Write for **readability** first.
`} />

<Markdown content={`> Design is not just what it looks like and feels like. Design is how it works.> Code is read much more often than it is written. Write for **readability** first.`} />

Code Blocks

Here's a TypeScript example:

interface User {
  id: string;
  name: string;
  email: string;
}

function getUser(id: string): Promise<User> {
  return fetch(`/api/users/${id}`).then(r => r.json());
}

And some inline const x = 42; code too.

<Markdown content={`
Here's a TypeScript example:

\`\`\`tsx
interface User {
  id: string;
  name: string;
  email: string;
}

function getUser(id: string): Promise<User> {
  return fetch(\`/api/users/\${id}\`).then(r => r.json());
}
\`\`\`

And some inline \`const x = 42;\` code too.
`} />

<Markdown content={`Here's a TypeScript example:\`\`\`tsxinterface User {  id: string;  name: string;  email: string;}function getUser(id: string): Promise<User> {  return fetch(\`/api/users/\${id}\`).then(r => r.json());}\`\`\`And some inline \`const x = 42;\` code too.`} />

Horizontal Rules

Section One

Some content in the first section.

Section Two

Some content in the second section.

<Markdown content={`
## Section One

Some content in the first section.

---

## Section Two

Some content in the second section.
`} />

<Markdown content={`## Section OneSome content in the first section.---## Section TwoSome content in the second section.`} />

Size Variants

Small size — Compact text for sidebars, tooltips, or dense layouts. Supports inline code and emphasis.

base (default)

Base size — Default text size for general content. Supports inline code and emphasis.

Large size — Bigger text for hero sections or feature descriptions. Supports inline code and emphasis.

<Markdown size="sm" content="**Small** text for compact layouts." />
<Markdown size="base" content="**Base** text for general content." />
<Markdown size="lg" content="**Large** text for hero sections." />

<Markdown size="sm" content="**Small** text for compact layouts." /><Markdown size="base" content="**Base** text for general content." /><Markdown size="lg" content="**Large** text for hero sections." />

Fluid Width

Default (max-w-prose)

This paragraph is constrained to a comfortable reading width of approximately 65 characters per line, which is optimal for readability in long-form content.

Fluid (full width)

This paragraph stretches to fill the entire width of its container, which is useful for dashboard panels, chat messages, or any layout where the parent already controls width.

{/* Constrained to ~65ch (default) */}
<Markdown content="Long paragraph..." />

{/* Full width */}
<Markdown fluid content="Long paragraph..." />

{/* Constrained to ~65ch (default) */}<Markdown content="Long paragraph..." />{/* Full width */}<Markdown fluid content="Long paragraph..." />

Rich Document

Project Setup Guide

Welcome to the Unified UI setup guide. Follow these steps to get started.

Prerequisites

Before you begin, make sure you have:

Node.js 18+ installed
npm or pnpm package manager
A Next.js project

Installation

Install the package
Import the stylesheet
Wrap your app with the theme provider

npm install @work-rjkashyap/unified-ui

Note: The package includes TypeScript declarations out of the box.

Quick Start

Import and use any component:

import { Button } from "@work-rjkashyap/unified-ui";

export default function App() {
  return <Button variant="primary">Get Started</Button>;
}

That's it! You're ready to build with ~~plain HTML~~ Unified UI.

<Markdown content={`
# Project Setup Guide

Welcome to the **Unified UI** setup guide. Follow these steps to get started.

## Prerequisites

Before you begin, make sure you have:

- **Node.js** 18+ installed
- \`npm\` or \`pnpm\` package manager
- A [Next.js](https://nextjs.org) project

## Installation

1. Install the package
2. Import the stylesheet
3. Wrap your app with the theme provider

\`\`\`bash
npm install @work-rjkashyap/unified-ui
\`\`\`

> **Note**: The package includes TypeScript declarations out of the box.

---

That's it! You're ready to build with ~~plain HTML~~ **Unified UI**.
`} />

<Markdown content={`# Project Setup GuideWelcome to the **Unified UI** setup guide. Follow these steps to get started.## PrerequisitesBefore you begin, make sure you have:- **Node.js** 18+ installed- \`npm\` or \`pnpm\` package manager- A [Next.js](https://nextjs.org) project## Installation1. Install the package2. Import the stylesheet3. Wrap your app with the theme provider\`\`\`bashnpm install @work-rjkashyap/unified-ui\`\`\`> **Note**: The package includes TypeScript declarations out of the box.---That's it! You're ready to build with ~~plain HTML~~ **Unified UI**.`} />

Props

Prop	Type	Default	Description
`content`	`string`	—	Markdown string to render.
`size`	`"sm" \| "base" \| "lg"`	`"base"`	Text size variant.
`fluid`	`boolean`	`false`	Whether to remove the max-width constraint.
`allowHtml`	`boolean`	`false`	Whether to allow raw HTML in the markdown.
`className`	`string`	—	Additional CSS classes.

Supported Syntax

Feature	Syntax	Example
Heading 1–6	`# … ######`	`# Title`
Bold	`text` / `__text__`	`bold`
Italic	`text` / `_text_`	`italic`
Strikethrough	`~~text~~`	`~~deleted~~`
Inline code	`code`	`variable`
Code block	```	Fenced with optional language
Link	`[text](url)`	`[Docs](https://example.com)`
Image	`![alt](src)`	`![Logo](/logo.png)`
Unordered list	`- item`	`- First`
Ordered list	`1. item`	`1. Step one`
Blockquote	`> text`	`> A wise quote`
Horizontal rule	`---` / `***` / `___`	`---`

Security

By default, all HTML tags in the markdown input are escaped to prevent XSS attacks. Only set allowHtml={true} if you fully trust the source of the markdown content.

// Safe — HTML is escaped (default)
<Markdown content='Hello <script>alert("xss")</script>' />
// Renders: Hello &lt;script&gt;alert("xss")&lt;/script&gt;

// Unsafe — only use with trusted content
<Markdown content="Hello <em>world</em>" allowHtml />
// Renders: Hello <em>world</em>

Accessibility

Output uses semantic HTML elements (h1–h6, ul, ol, blockquote, pre, code, a, etc.).
Links include target="_blank" with rel="noopener noreferrer" for security.
Images include the provided alt text and loading="lazy".
Code blocks use <pre> and <code> for proper screen reader semantics.

Design Tokens

Token	Usage
`--foreground`	Body text color
`--muted-foreground`	Heading 6, blockquote text
`--muted`	Inline code and code block background
`--primary`	Link text color
`--primary-hover`	Link hover color
`--border`	Blockquote border, horizontal rules
`--radius-lg`	Code block border radius

Markdown

Hello World

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Unordered List

Ordered List

Section One

Section Two

Project Setup Guide

Prerequisites

Installation

Quick Start

On this page