How it works

If you just want to start using Prose UI quickly, feel free to jump to the installation guide or begin with one of the templates.

Prose UI consists for 3 main elements:

React components
Available in @prose-ui/next
CSS styles
Available in @prose-ui/next/prose-ui.css
Remark plugins
Available in @prose-ui/core

React components

The mdxComponents array from @prose-ui/next includes React server components necessary for rendering elements such as highlighted code blocks, callouts, images, headings, and frames.

import { mdxComponents } from "@prose-ui/next"

Prose UI also exports these components individually for use outside of MDX.

import { CodeBlock, Frame, Callout, Image, Heading } from "@prose-ui/next"

CSS styles

CSS styles from @prose-ui/next/prose-ui.css provide default styles for typography and Prose UI components, scoped under the prose-ui ancestor CSS class.

In Next.js, it's recommended to import these styles into your globals.css file:

@import '@prose-ui/next/prose-ui.css'

Prose UI uses the presence of the dark CSS class on the <html> element to determine whether to render content in dark mode.

Customize styles

The easiest way to customize styles is by overriding the CSS variables defined in @prose-ui/next/prose-ui.css.

Remark plugins

The remarkPlugins(options) function from @prose-ui/core enables essential features such as converting Markdown images to optimized next/image components and Markdown links to next/link components.

import { remarkPlugins } from '@prose-ui/core'

The function accepts an optional options object, and returns an arary of remark plugins you can use to set up your MDX renderer. Here's an example:

const plugins = remarkPlugins({
  image: {
    imageDir: './public',
  },
})