Paper UI design system · free · open source · shadcn compatible
A design system printed on paper.
Buttons that press like typewriter keys, inputs on ruled lines, folder tabs, label-maker badges and dialogs that arrive like letters. Six paper types, one attribute to switch between them, and it re-skins the shadcn components you already have.
New letter
Goes out with the morning post.
- TravelOct 12Sam OkaforPostcard from Lisbon
- DueOct 11Studio MoriInvoice Nº 0042
- KeepOct 9GrandmaThe fig jam recipe
Everything above is real and clickable: the tabs, checkbox, preview dialog and send toast.
The system
Core
28 everyday pieces of an interface, built on Radix for keyboard and screen reader support. Same APIs as shadcn/ui, so you can swap them in one at a time.
Install the theme and every core component in one go:
$ npx shadcn@latest add https://ephemera.kerrshift.com/r/all.jsonOr start with just the theme and add pieces as you need them:
$ npx shadcn@latest add https://ephemera.kerrshift.com/r/paper-theme.jsonSix paper types as CSS variables (Cream, Kraft, Ledger, Blueprint, Newsprint, Carbon), merged into your global CSS, plus the five Ephemera fonts. Also re-skins existing shadcn/ui components.
Forms · 8
Typewriter keys that press down. Ink, paper, ghost and danger.
Type on a ruled line. Includes a notebook Textarea and Label.
A box ticked in pen, with an animated stroke.
Pencil circles that fill with a blot of ink.
A typewriter lever that slides between OFF and ON.
A card-catalogue drawer of options.
A ruler with a pen-nib marker.
A ruled field that opens a desk calendar.
Layout · 5
Overlays · 6
A letter that slides up out of its envelope.
A folder that slides in from the edge, with a tab.
A slip of paper with a folded corner.
A sticky note that appears on hover.
A typed menu on an index card.
Notifications that print as receipt slips and tear away.
Display · 9
Embossed label-maker tape.
A postage-stamp or postmark avatar.
A memo with a note in the margin.
A punch card that fills hole by hole.
A light pencil sketch while content loads.
Kbd
→Round typewriter keys for shortcuts.
A desk calendar page. The chosen day gets circled in pen.
A typed file path.
Notebook page numbers, the current one circled.
For the moments that should feel special
Extras
Receipts that print, tickets that tear, Polaroids that develop. Drop them into confirmations, invites and recaps.
Everything on this desk is a React component. Click the cards below to grab one.
A thermal-paper receipt with torn edges that prints line by line.
An admission ticket with a perforated stub you can tear off.
A boarding pass for trips, itineraries and invitations.
An instant photo that develops as it scrolls into view. Click to shake it.
A perforated stamp with an optional inked postmark.
A speckled ink stamp that thuds onto the page.
An envelope that opens to reveal a letter.
A hand-poured wax seal with your initials.
A sticky note with a curled corner, tape or a push pin.
Questions
About paper UI
Ephemera is a paper UI design system: 28 core components and 9 extras for React and shadcn/ui, styled after real stationery.