S shadcn · 13

Body text

본문

By default (ruled) headings get a thin line underneath and tables have horizontal lines only, with no outer box. boxed wraps them in boxes; open uses generous spacing and larger headings.

RuleBody text is 17px on phones and 18px on wide screens at 1.8 line height — no pack shrinks it. The structure is shared; packs only restyle it.

Also known as: ProseTableTypography
···
usage (Astro)
---
// src/pages/[post].astro
import { Prose } from '../components/registry';
---
<Prose>
  <Content />
</Prose>
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "Prose": "ruled" }
}
props (TypeScript)
export interface ProseProps {
  variant?: VariantOf<'Prose'>;
  careVariant?: VariantOf<'CareGuide'>;
  /** 정적 페이지(소개 등)처럼 표·병원 카드가 없는 글 */
  plain?: boolean;
}

ruled has tables with horizontal lines only, gray header text, a thin line under headings and a timeline with a thin left line and small dots. boxed wraps tables in a rounded outlined box with lines between cells and a light gray background on every other row, and timeline items are outlined boxes. open has larger headings with no heading line, only a light gray table header with no vertical lines, and a timeline split into a stage column on the left and content on the right.

For dense content boxed separates things most clearly, open favors reading flow, and ruled is the lightest. Care guide notices and quotes are drawn within the same body text.

The reading rules (17 and 18px text, 1.8 line height) are additions on top of the pack; original shadcn body text is 16px. Quotes use a full border instead of a one-sided line.

Use it when — Variants 3

  1. ruledRuled Table-heavy posts that should read calmly — horizontal rules only, dot-and-line timelines.Used by 4: feeding, toddlerfood, vaccination, 허브
  2. boxedBoxed When readers trace cells one by one, as in amount or age charts.Used by 4: babyfood, babysick, milestone, newborn
  3. openOpen Posts with lots of age-by-age content — big subheadings, stage | content.Used by 3: babyplay, babysleep, birthprep
Open as page ↗

Suggest an entry

Tell us about a missing component or variant, or something a pack should fix. We read every suggestion.