sh4dcnv2 · atlas
← libraries

@ephemera

A paper UI design system: shadcn/ui-compatible components styled as stationery, with six paper themes, fonts and theme CSS that install in one step.

43 components react shadcn-cli MIT

Install this registry

shadcn (npm) npx shadcn@latest add https://ephemera.kerrshift.com/r/registry.json
pnpm pnpm dlx shadcn@latest add https://ephemera.kerrshift.com/r/registry.json
bun bunx shadcn@latest add https://ephemera.kerrshift.com/r/registry.json
fetch registry curl -s https://ephemera.kerrshift.com/r/registry.json

Components

43 total
Paper Theme theme

Six paper types as CSS variables (Cream, Kraft, Ledger, Blueprint, Newsprint, Carbon), merged into your global CSS, plus the five Ephemera fonts. Also re-skins…

npx shadcn@latest add https://ephemera.kerrshift.com/r/paper-theme.json
Fraunces (font) font

Display serif for titles, letters and cards.

npx shadcn@latest add https://ephemera.kerrshift.com/r/font-fraunces.json
IBM Plex Mono (font) font

Thermal-receipt monospace for receipts, toasts and code.

npx shadcn@latest add https://ephemera.kerrshift.com/r/font-ibm-plex-mono.json
Courier Prime (font) font

Typewriter face for labels, buttons and inputs.

npx shadcn@latest add https://ephemera.kerrshift.com/r/font-courier-prime.json
Caveat (font) font

Handwriting for sticky notes, tooltips and captions.

npx shadcn@latest add https://ephemera.kerrshift.com/r/font-caveat.json
Anton (font) font

Condensed capitals for rubber stamps.

npx shadcn@latest add https://ephemera.kerrshift.com/r/font-anton.json
Button ui

Typewriter keys that press down. Ink, paper, ghost and danger.

npx shadcn@latest add https://ephemera.kerrshift.com/r/button.json
Input ui

Type on a ruled line. Includes a notebook Textarea and Label.

npx shadcn@latest add https://ephemera.kerrshift.com/r/input.json
Checkbox ui

A box ticked in pen, with an animated stroke.

npx shadcn@latest add https://ephemera.kerrshift.com/r/checkbox.json
Radio Group ui

Pencil circles that fill with a blot of ink.

npx shadcn@latest add https://ephemera.kerrshift.com/r/radio-group.json
Switch ui

A typewriter lever that slides between OFF and ON.

npx shadcn@latest add https://ephemera.kerrshift.com/r/switch.json
Select ui

A card-catalogue drawer of options.

npx shadcn@latest add https://ephemera.kerrshift.com/r/select.json
Slider ui

A ruler with a pen-nib marker.

npx shadcn@latest add https://ephemera.kerrshift.com/r/slider.json
Date Picker ui

A ruled field that opens a desk calendar.

npx shadcn@latest add https://ephemera.kerrshift.com/r/date-picker.json
Card ui

An index card, optionally ruled with a red header line.

npx shadcn@latest add https://ephemera.kerrshift.com/r/card.json
Tabs ui

File-folder tabs on top of a sheet.

npx shadcn@latest add https://ephemera.kerrshift.com/r/tabs.json
Accordion ui

Index-card dividers that open to reveal their notes.

npx shadcn@latest add https://ephemera.kerrshift.com/r/accordion.json
Separator ui

Rules, double rules and tear-here perforations.

npx shadcn@latest add https://ephemera.kerrshift.com/r/separator.json
Table ui

Ledger paper with a red margin and double-ruled totals.

npx shadcn@latest add https://ephemera.kerrshift.com/r/table.json
Dialog ui

A letter that slides up out of its envelope.

npx shadcn@latest add https://ephemera.kerrshift.com/r/dialog.json
Sheet ui

A folder that slides in from the edge, with a tab.

npx shadcn@latest add https://ephemera.kerrshift.com/r/sheet.json
Popover ui

A slip of paper with a folded corner.

npx shadcn@latest add https://ephemera.kerrshift.com/r/popover.json
Tooltip ui

A sticky note that appears on hover.

npx shadcn@latest add https://ephemera.kerrshift.com/r/tooltip.json
Dropdown Menu ui

A typed menu on an index card.

npx shadcn@latest add https://ephemera.kerrshift.com/r/dropdown-menu.json
Toast ui

Notifications that print as receipt slips and tear away.

npx shadcn@latest add https://ephemera.kerrshift.com/r/toast.json
Badge ui

Embossed label-maker tape.

npx shadcn@latest add https://ephemera.kerrshift.com/r/badge.json
Avatar ui

A postage-stamp or postmark avatar.

npx shadcn@latest add https://ephemera.kerrshift.com/r/avatar.json
Alert ui

A memo with a note in the margin.

npx shadcn@latest add https://ephemera.kerrshift.com/r/alert.json
Progress ui

A punch card that fills hole by hole.

npx shadcn@latest add https://ephemera.kerrshift.com/r/progress.json
Skeleton ui

A light pencil sketch while content loads.

npx shadcn@latest add https://ephemera.kerrshift.com/r/skeleton.json
Kbd ui

Round typewriter keys for shortcuts.

npx shadcn@latest add https://ephemera.kerrshift.com/r/kbd.json
Calendar ui

A desk calendar page. The chosen day gets circled in pen.

npx shadcn@latest add https://ephemera.kerrshift.com/r/calendar.json
Breadcrumb ui

A typed file path.

npx shadcn@latest add https://ephemera.kerrshift.com/r/breadcrumb.json
Pagination ui

Notebook page numbers, the current one circled.

npx shadcn@latest add https://ephemera.kerrshift.com/r/pagination.json
Receipt ui

A thermal-paper receipt with torn edges that prints line by line.

npx shadcn@latest add https://ephemera.kerrshift.com/r/receipt.json
Ticket ui

An admission ticket with a perforated stub you can tear off.

npx shadcn@latest add https://ephemera.kerrshift.com/r/ticket.json
Boarding Pass ui

A boarding pass for trips, itineraries and invitations.

npx shadcn@latest add https://ephemera.kerrshift.com/r/boarding-pass.json
Polaroid ui

An instant photo that develops as it scrolls into view. Click to shake it.

npx shadcn@latest add https://ephemera.kerrshift.com/r/polaroid.json
Postage Stamp ui

A perforated stamp with an optional inked postmark.

npx shadcn@latest add https://ephemera.kerrshift.com/r/postage-stamp.json
Rubber Stamp ui

A speckled ink stamp that thuds onto the page.

npx shadcn@latest add https://ephemera.kerrshift.com/r/rubber-stamp.json
Envelope ui

An envelope that opens to reveal a letter.

npx shadcn@latest add https://ephemera.kerrshift.com/r/envelope.json
Wax Seal ui

A hand-poured wax seal with your initials.

npx shadcn@latest add https://ephemera.kerrshift.com/r/wax-seal.json
Sticky Note ui

A sticky note with a curled corner, tape or a push pin.

npx shadcn@latest add https://ephemera.kerrshift.com/r/sticky-note.json