Markdown

Composable Markdown renderer

A composable react-markdown component with defaults for all standard markdown elements (headings, paragraphs, lists, blockquotes, links, images, tables, code). Customize any element via the components prop and import optional components such as Quote or Avatar. All components are lazy-loaded.

Main Heading#

This is a paragraph with some bold text, italic text, and inline code.

Subheading#

You can use links in your content.

Code Example#

const greeting = 'Hello, Markdown!'
console.log(greeting)

Lists#

Unordered list:

First item
Second item
- Nested item
- Another nested item
Third item

Ordered list:

First step
Second step
Third step

Blockquote#

This is a blockquote. It can span multiple lines and is useful for emphasizing important information or highlighting quotes.

Horizontal Rule#

Table#

Feature	Support	Status
Headings	h1–h6	✓
Lists	Unordered & Ordered	✓
Code	Inline & Blocks	✓
Tables	GitHub Flavored	✓

import { Markdown } from 'ui-patterns/Markdown'
 
export function MarkdownFullExample() {
  const content = `# Main Heading
 
This is a paragraph with some **bold text**, *italic text*, and \`inline code\`.
 
## Subheading
 
You can use [links](https://supabase.com) in your content.
 
### Code Example
 
\`\`\`javascript
const greeting = 'Hello, Markdown!'
console.log(greeting)
\`\`\`
 
### Lists
 
**Unordered list:**
- First item
- Second item
  - Nested item
  - Another nested item
- Third item
 
**Ordered list:**
1. First step
2. Second step
3. Third step
 
### Blockquote
 
> This is a blockquote. It can span multiple lines and is useful for emphasizing important information or highlighting quotes.
 
### Horizontal Rule
 
---
 
### Table
 
| Feature | Support | Status |
|---------|---------|--------|
| Headings | h1–h6 | ✓ |
| Lists | Unordered & Ordered | ✓ |
| Code | Inline & Blocks | ✓ |
| Tables | GitHub Flavored | ✓ |`
 
  return <Markdown codeBlock>{content}</Markdown>
}

API

Prop	Type	Default	Description
`children`	`string`	-	Markdown content to render
`content`	`string`	`''`	Deprecated: Use `children` instead
`codeBlock`	`boolean`	`false`	Enable syntax highlighting for code blocks (lazy-loaded via CodeBlock)
`components`	`Partial<Components>`	-	Override or add specific markdown elements
`className`	`string`	-	CSS class for the wrapper div
`remarkPlugins`	`PluggableList`	`[remarkGfm]`	Additional remark plugins (GFM is included by default)

All other react-markdown options are supported via spread props.

Customization

Override any element or add new ones via the components prop.

Auth error codes#

Error Code	Description
`invalid_credentials`	Invalid email or password provided
`session_not_found`	User session not found or has expired
`weak_password`	Password does not meet strength requirements
`email_not_confirmed`	Email address has not been verified
`mfa_required`	Multi-factor authentication is required

import { Markdown } from 'ui-patterns/Markdown'
 
import { ErrorCodes } from '@/components/error-codes'
import { remarkJsxComponents } from '@/lib/remark-jsx-components'
 
export function MarkdownCustomization() {
  return (
    <Markdown
      remarkPlugins={[remarkJsxComponents]}
      components={{
        ErrorCodes,
      }}
    >
      {`## Auth error codes
 
<ErrorCodes service="auth" />
`}
    </Markdown>
  )
}

Primitive Components

import {
  Anchor,
  Avatar,
  Blockquote,
  Code,
  CodeBlockPre,
  DefaultPre,
  H1,
  H2,
  H3,
  H4,
  H5,
  H6,
  Hr,
  Img,
  InlineCode,
  ListItem,
  OrderedList,
  Paragraph,
  Quote,
  SimplePre,
  Table,
  Td,
  Th,
  Tr,
  UnorderedList,
} from 'ui-patterns/Markdown'

Headings

H1 Heading#

H2 Heading#

H3 Heading#

Paragraphs

First paragraph with text.

Second paragraph with bold and italic text.

Third paragraph for spacing demonstration.

Lists

Unordered list:

Item 1
Item 2
- Nested item

Ordered list:

First step
Second step

Links

This is a link to Supabase in the middle of text.

You can also have multiple links in one paragraph.

Inline Code

Use the useState hook for state management.

The useEffect hook runs side effects after render.

Functions like map(), filter(), and reduce() are common.

Blockquotes

This is a blockquote with important information.

Blockquotes can span multiple lines and are useful for emphasizing key points or highlighting quotes.

Code Blocks

const greeting = 'Hello, World!'
console.log(greeting)

def hello_world():
    print("Hello, World!")

Tables

Feature	Support	Status
Headings	h1–h6	✓
Lists	Unordered & Ordered	✓
Code	Inline & Blocks	✓
Tables	GitHub Flavored	✓

Images

Supabase Logo

Image with alt text for accessibility.

Horizontal Rules

Content before

Content after

Optional Components

Quote

This is a powerful insight that deserves emphasis with attribution.

— Jane Doe
Co-founder at Supabase

import { Markdown, Quote } from 'ui-patterns/Markdown'
 
export function MarkdownQuoteComponentDemo() {
  const content = `> This is a powerful insight that deserves emphasis with attribution.`
 
  return (
    <Markdown
      components={{
        blockquote: (props) => (
          <Quote
            attribution="Jane Doe"
            src="https://avatars.githubusercontent.com/u/54469796?s=200&v=4"
            caption="Co-founder at Supabase"
            {...props}
          />
        ),
      }}
    >
      {content}
    </Markdown>
  )
}

Avatar

Supabase Team

import { Avatar } from 'ui-patterns/Markdown'
 
export function MarkdownAvatarComponentDemo() {
  return (
    <Avatar
      src="https://avatars.githubusercontent.com/u/54469796?s=200&v=4"
      alt="Supabase"
      caption="Supabase Team"
    />
  )
}

PreviousLayout

NextModality