{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "prose",
  "title": "Prose",
  "description": "long-form text (articles, docs, rendered markdown) at the theme's typeset: measure, leading, flow",
  "dependencies": [
    "cn@^0.4.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/kit/prose.tsx",
      "content": "import { cn } from 'cn';\nimport type * as React from 'react';\n\n/**\n * Long-form text at the theme's typeset: the measure (longest line), leading (line height) and flow (space\n * between blocks) come from --typeset-measure, --typeset-leading and --typeset-flow; headings take the heading\n * font, code the mono font. Style the HTML you put in it (an article, rendered markdown, a chat answer), not\n * the layout around it: no cards, buttons or grids inside.\n */\nconst PROSE = cn(\n  'text-foreground max-w-(--typeset-measure) text-base leading-(--typeset-leading)',\n  // Flow: the same space between every pair of blocks; a heading gets more above it than below.\n  '[&>*+*]:mt-(--typeset-flow) [&>:is(h2,h3,h4):not(:first-child)]:mt-[calc(var(--typeset-flow)*1.6)] [&>:is(h2,h3,h4)+*]:mt-[calc(var(--typeset-flow)*0.5)]',\n  '[&_:is(h1,h2,h3,h4)]:font-heading [&_:is(h1,h2,h3,h4)]:text-balance [&_:is(h1,h2,h3,h4)]:font-semibold [&_:is(h1,h2,h3,h4)]:tracking-tight',\n  '[&_h1]:text-3xl [&_h1]:leading-tight [&_h2]:text-2xl [&_h2]:leading-snug [&_h3]:text-xl [&_h3]:leading-snug [&_h4]:text-base',\n  '[&_a]:text-foreground [&_a]:decoration-primary [&_a]:font-medium [&_a]:underline [&_a]:underline-offset-4',\n  '[&_strong]:font-semibold [&_:is(ul,ol)]:pl-6 [&_ul]:list-disc [&_ol]:list-decimal [&_li+li]:mt-2 [&_li]:pl-1 [&_li::marker]:text-muted-foreground',\n  '[&_blockquote]:border-border [&_blockquote]:text-muted-foreground [&_blockquote]:border-l-2 [&_blockquote]:pl-4 [&_blockquote]:italic',\n  '[&_:not(pre)>code]:bg-muted [&_:not(pre)>code]:rounded-sm [&_:not(pre)>code]:px-1.5 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:text-[0.875em]',\n  '[&_:is(code,pre,kbd)]:font-mono [&_pre]:bg-muted [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:p-4 [&_pre]:text-sm [&_pre]:leading-relaxed',\n  '[&_hr]:border-border [&_table]:w-full [&_table]:text-sm [&_th]:border-b [&_th]:py-2 [&_th]:pr-4 [&_th]:text-left [&_th]:font-medium [&_td]:border-b [&_td]:py-2 [&_td]:pr-4',\n  '[&_figcaption]:text-muted-foreground [&_figcaption]:mt-2 [&_figcaption]:text-sm [&_img]:rounded-lg'\n);\n\ntype Props = React.ComponentProps<'div'> & {\n  /** The element to render: `article` for a page's own text, `div` (default) inside something else. */\n  as?: 'div' | 'article' | 'section';\n};\n\nexport function Prose({ as: Tag = 'div', className, ...props }: Props) {\n  return <Tag data-slot=\"prose\" className={cn(PROSE, className)} {...props} />;\n}\n",
      "type": "registry:component",
      "target": "components/kit/prose.tsx"
    }
  ],
  "meta": {
    "exports": [
      "Prose"
    ],
    "api": "<Prose as?=\"div|article|section\">{html}</Prose>"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "layout"
  ],
  "type": "registry:component"
}