edbnedbn/ui
ComponentsTablesChartsPDFsStandards
GitHub stars
Explorer
    • Welcome
    • Changelog
    • 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
    • License

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

Dependencies

None

Registry dependencies

None

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.