edbnedbn/uibeta
ComponentsTablesChartsPDFs
GitHub stars
Explorer
    • Welcome
    • Principles
    • Accordion
    • Alert
    • Alert Dialog
    • Aspect Ratio
    • Attachment
    • Avatar
    • Badge
    • Breadcrumb
    • Bubble
    • Button
    • Button Group
    • Calendar
    • Card
    • Carousel
    • Chart
    • Checkbox
    • Collapsible
    • Combobox
    • Command
    • Context Menu
    • Data Table
    • Date Picker
    • Basic
    • Range
    • Date of Birth
    • Input
    • Time
    • Natural Language
    • RTL
    • Dialog
    • Direction
    • Drawer
    • Dropdown Menu
    • Empty
    • Field
    • Form
    • Bug Report
    • Select
    • Checkbox Group
    • Radio Group
    • Switch
    • Complex Form
    • Array Fields
    • Hover Card
    • Input
    • Input Group
    • Input Otp
    • Item
    • Kbd
    • Label
    • Marker
    • Menubar
    • Message
    • Message Scroller
    • Native Select
    • Navigation Menu
    • Pagination
    • Popover
    • Progress
    • Questionnaire
    • Radio Group
    • Resizable
    • Scroll Area
    • Select
    • Separator
    • Sheet
    • Sidebar
    • Skeleton
    • Slider
    • Sonner
    • Spinner
    • Switch
    • Table
    • Tabs
    • Textarea
    • Toast
    • Toggle
    • Toggle Group
    • Tooltip
    • Typeset
    • Documentation
    • Reading
    • Chat / Streaming
    • Element Coverage

Composition recipe

Typeset

Owned semantic typography CSS for documentation, long-form reading, and streamed content.

Owned CSSshadcn reference

Installation

Import the stylesheet

globals.css
2 lines
1
2
@import "./typeset.css";
@import "./typeset-presets.css";

Source

Documentation

Install and wrap content

Copy both CSS files from Source, import the canonical stylesheet before the local presets, then place typeset on the semantic content boundary.

@import "./typeset.css";
@import "./typeset-presets.css";
<article className="typeset typeset-docs">
  <h1>Release notes</h1>
  <p>Write semantic HTML and let the content boundary own rhythm.</p>
</article>

Rhythm variables

  • --typeset-font-body, --typeset-font-heading, and --typeset-font-mono select font roles.
  • --typeset-size controls the base size.
  • --typeset-leading controls line height.
  • --typeset-flow controls vertical rhythm between blocks.

The bundled presets are typeset-docs, typeset-reading, typeset-chat, typeset-compact, and typeset-large.

Streaming and wide content

Separators live on table cells and flow spacing belongs to each block, so appending content does not depend on a last-child selector. Wrap wide tables in typeset-scroll to preserve real table semantics while allowing horizontal overflow.

<div className="typeset-scroll">
  <table>{/* wide columns */}</table>
</div>

Opt out and theme

Use not-typeset or data-not-typeset around application UI nested inside rich content. The stylesheet consumes semantic foreground, muted, border, primary, ring, radius, and font tokens, so light, dark, and forced-color themes remain aligned.

Do not replace headings, lists, links, tables, or disclosures with generic divs. Typeset styles meaning that already exists in the HTML.

Print and accessibility

  • Headings avoid page breaks immediately after themselves.
  • Code, tables, blockquotes, and figures avoid splitting when possible.
  • Links receive a visible focus outline.
  • Forced colors restore a border around inline code.