Typographyradix-ui

Prose

Rich text (Markdown, MDX, CMS) set in the theme's type: headings, links, lists, quotes, code, tables.

The method

Most days are forgettable. If nothing carries from one to the next, years pass without change. So each night, name what mattered and decide how it changes tomorrow. Read more.

Keep the gains small. Let them compound.

Each night

What was the most significant thing that happened today?
How will it change what you do tomorrow?

The carried answer is stored as carryId:

const promise = entries[yesterday].answers[carryId]

Week	Nights	Kept
40	6	83%
41	5	71%

Installation

pnpm dlx shadcn@latest add https://glasscn.app/r/prose.json

Or with the namespace set up: shadcn add @glasscn/prose

Wrap rendered Markdown/MDX: <Prose dangerouslySetInnerHTML={{ __html }} /> or <Prose><MDXContent /></Prose>.

Line length follows --glass-measure; className="max-w-none" to fill the container. Everything else comes from the type, colour and shape tokens.

Source

components/glass/prose.tsx

import * as React from "react"
import { cn } from "cn"
import { Slot } from "radix-ui"

/**
 * Rich text — Markdown, MDX, a CMS — set in the theme's type: headings, links,
 * lists, quotes, code, tables, images, all from the type and colour tokens.
 * Line length is `--glass-measure`; pass `className="max-w-none"` to fill.
 */
function Prose({ asChild = false, className, ...props }: React.ComponentProps<"div"> & { asChild?: boolean }) {
  const Comp = asChild ? Slot.Root : "div"
  return <Comp data-slot="prose" className={cn("glass-prose", className)} {...props} />
}

export { Prose }