A production component library·Now in private beta
stable Content

Foliotype Split

Split two-column content section pairing copy with a supporting visual.

Sign in to copy

Deep dive

Two ways Foliotype changes how you work.

Focus

Write without the noise

A canvas tuned for reading, with everything else tucked away until you reach for it.

  • Typewriter scrolling and focus mode
  • Keyboard-first commands
  • Zero-config typography

Ship

Publish the moment it's ready

Send finished pieces to the web, your newsletter, or an API without touching a settings page.

  • One-click publish targets
  • Custom domains and RSS
  • Scheduled releases
foliotype-split.tsx 63 lines · TypeScript

The full source is for members

Sign in and choose a plan to view and copy foliotype-split.tsx. The live preview above is free to explore.

Sign in

How to use. Copy foliotype-split.tsx into your project (it's self-contained — the styles ship with it and dedupe across instances in React 19). Theme it by setting --sdf-* tokens on any ancestor. No dependencies, no build step.

All React components
A Stacklumen Product