# Ephemera: the paper UI design system for React

> A paper UI design system for React. shadcn/ui-compatible components (same APIs) styled as stationery: typewriter buttons, ruled inputs, folder tabs, ledger tables, label-maker badges, letter dialogs and receipt toasts. Built on Radix and Tailwind CSS v4. MIT licensed.

Setup:
1. `npx shadcn@latest add https://ephemera.kerrshift.com/r/all.json` installs the paper theme (merged into your global CSS), its five fonts and every core component. Or install single items, e.g. `npx shadcn@latest add https://ephemera.kerrshift.com/r/button.json`.
2. Put `data-paper="cream"` on <html> (or any element). Paper types: cream, kraft, ledger, blueprint, newsprint, carbon.
3. Short names via the shadcn registry directory (or a "@ephemera" entry in components.json registries): `npx shadcn@latest add @ephemera/button`.

Theme variables: --paper, --paper-raised, --paper-sunk, --ink, --ink-muted, --ink-faint, --pen, --pen-ink, --edge, --rule, --margin, --danger. Utility classes: .paper (grain), .paper-ruled (notebook lines). The theme also sets the standard shadcn variables (--background, --primary, --border…). Fonts: --font-display (Fraunces), --font-receipt (IBM Plex Mono), --font-type (Courier Prime), --font-hand (Caveat), --font-stamp (Anton).

Each component's JSON (https://ephemera.kerrshift.com/r/<name>.json) contains its full source. Complete documentation in one file: https://ephemera.kerrshift.com/llms-full.txt

Also known as: Paper UI, paper design system, paper UI kit, paper UX components, skeuomorphic stationery UI.
Created by Sahil Gangurde (https://lostmartian.in, https://github.com/lostmartian). Published by KerrShift (https://kerrshift.com). Source: https://github.com/kerrshift/ephemera. License: MIT.

## Theme
- [Paper Theme](https://ephemera.kerrshift.com/components/paper-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 existing shadcn/ui components. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/paper-theme.json`

## Fonts
- [Fraunces (font)](https://ephemera.kerrshift.com/components/font-fraunces): Display serif for titles, letters and cards. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/font-fraunces.json`
- [IBM Plex Mono (font)](https://ephemera.kerrshift.com/components/font-ibm-plex-mono): Thermal-receipt monospace for receipts, toasts and code. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/font-ibm-plex-mono.json`
- [Courier Prime (font)](https://ephemera.kerrshift.com/components/font-courier-prime): Typewriter face for labels, buttons and inputs. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/font-courier-prime.json`
- [Caveat (font)](https://ephemera.kerrshift.com/components/font-caveat): Handwriting for sticky notes, tooltips and captions. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/font-caveat.json`
- [Anton (font)](https://ephemera.kerrshift.com/components/font-anton): Condensed capitals for rubber stamps. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/font-anton.json`

## Core components
- [Button](https://ephemera.kerrshift.com/components/button): Typewriter keys that press down. Ink, paper, ghost and danger. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/button.json`
- [Input](https://ephemera.kerrshift.com/components/input): Type on a ruled line. Includes a notebook Textarea and Label. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/input.json`
- [Checkbox](https://ephemera.kerrshift.com/components/checkbox): A box ticked in pen, with an animated stroke. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/checkbox.json`
- [Radio Group](https://ephemera.kerrshift.com/components/radio-group): Pencil circles that fill with a blot of ink. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/radio-group.json`
- [Switch](https://ephemera.kerrshift.com/components/switch): A typewriter lever that slides between OFF and ON. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/switch.json`
- [Select](https://ephemera.kerrshift.com/components/select): A card-catalogue drawer of options. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/select.json`
- [Slider](https://ephemera.kerrshift.com/components/slider): A ruler with a pen-nib marker. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/slider.json`
- [Date Picker](https://ephemera.kerrshift.com/components/date-picker): A ruled field that opens a desk calendar. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/date-picker.json`
- [Card](https://ephemera.kerrshift.com/components/card): An index card, optionally ruled with a red header line. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/card.json`
- [Tabs](https://ephemera.kerrshift.com/components/tabs): File-folder tabs on top of a sheet. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/tabs.json`
- [Accordion](https://ephemera.kerrshift.com/components/accordion): Index-card dividers that open to reveal their notes. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/accordion.json`
- [Separator](https://ephemera.kerrshift.com/components/separator): Rules, double rules and tear-here perforations. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/separator.json`
- [Table](https://ephemera.kerrshift.com/components/table): Ledger paper with a red margin and double-ruled totals. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/table.json`
- [Dialog](https://ephemera.kerrshift.com/components/dialog): A letter that slides up out of its envelope. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/dialog.json`
- [Sheet](https://ephemera.kerrshift.com/components/sheet): A folder that slides in from the edge, with a tab. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/sheet.json`
- [Popover](https://ephemera.kerrshift.com/components/popover): A slip of paper with a folded corner. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/popover.json`
- [Tooltip](https://ephemera.kerrshift.com/components/tooltip): A sticky note that appears on hover. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/tooltip.json`
- [Dropdown Menu](https://ephemera.kerrshift.com/components/dropdown-menu): A typed menu on an index card. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/dropdown-menu.json`
- [Toast](https://ephemera.kerrshift.com/components/toast): Notifications that print as receipt slips and tear away. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/toast.json`
- [Badge](https://ephemera.kerrshift.com/components/badge): Embossed label-maker tape. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/badge.json`
- [Avatar](https://ephemera.kerrshift.com/components/avatar): A postage-stamp or postmark avatar. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/avatar.json`
- [Alert](https://ephemera.kerrshift.com/components/alert): A memo with a note in the margin. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/alert.json`
- [Progress](https://ephemera.kerrshift.com/components/progress): A punch card that fills hole by hole. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/progress.json`
- [Skeleton](https://ephemera.kerrshift.com/components/skeleton): A light pencil sketch while content loads. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/skeleton.json`
- [Kbd](https://ephemera.kerrshift.com/components/kbd): Round typewriter keys for shortcuts. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/kbd.json`
- [Calendar](https://ephemera.kerrshift.com/components/calendar): A desk calendar page. The chosen day gets circled in pen. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/calendar.json`
- [Breadcrumb](https://ephemera.kerrshift.com/components/breadcrumb): A typed file path. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/breadcrumb.json`
- [Pagination](https://ephemera.kerrshift.com/components/pagination): Notebook page numbers, the current one circled. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/pagination.json`

## Extras
- [Receipt](https://ephemera.kerrshift.com/components/receipt): A thermal-paper receipt with torn edges that prints line by line. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/receipt.json`
- [Ticket](https://ephemera.kerrshift.com/components/ticket): An admission ticket with a perforated stub you can tear off. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/ticket.json`
- [Boarding Pass](https://ephemera.kerrshift.com/components/boarding-pass): A boarding pass for trips, itineraries and invitations. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/boarding-pass.json`
- [Polaroid](https://ephemera.kerrshift.com/components/polaroid): An instant photo that develops as it scrolls into view. Click to shake it. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/polaroid.json`
- [Postage Stamp](https://ephemera.kerrshift.com/components/postage-stamp): A perforated stamp with an optional inked postmark. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/postage-stamp.json`
- [Rubber Stamp](https://ephemera.kerrshift.com/components/rubber-stamp): A speckled ink stamp that thuds onto the page. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/rubber-stamp.json`
- [Envelope](https://ephemera.kerrshift.com/components/envelope): An envelope that opens to reveal a letter. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/envelope.json`
- [Wax Seal](https://ephemera.kerrshift.com/components/wax-seal): A hand-poured wax seal with your initials. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/wax-seal.json`
- [Sticky Note](https://ephemera.kerrshift.com/components/sticky-note): A sticky note with a curled corner, tape or a push pin. Install: `npx shadcn@latest add https://ephemera.kerrshift.com/r/sticky-note.json`