Skip to content
Patina UI

shadcn/ui registry · Base UI

shadcn/ui, with a patina.

Components that look printed, cut and handled: overprinted ink on real-feeling paper, a serif to read, a hand to annotate, a mono to label, and wear that deepens the longer a page is used.

npx shadcn add @patina/patina
Get startedOpen the Press

Lino · seed salt-marsh

Every surface has a history

Each card takes its print, its tape and its tilt from one seed: different from its neighbours, and the same on every visit.

Variation
  1. No. 0412 · Tidal flats
    Grey heron

    Still for eleven minutes, then a single strike.

  2. No. 0410 · Reed bed
    Bittern

    Heard booming twice; seen briefly at the reed edge.

  3. No. 0407 · Saltings
    Avocet

    Sweeping in the shallow pool behind the sea wall.

  4. No. 0402 · Sea wall
    Little egret

    Roosting on the wall at high tide.

In use

Real components doing their jobs in Fieldbook, the field notebook this kit was built with.

  1. A note in the margin

    Select a phrase in an entry and write beside it. The highlighter follows the selection; the note arrives in the hand voice, pointing back at what it is about.

    Highlight · Margin note · Button

  2. New paper, same notebook

    Choose a stock in Settings and every sheet reprints on it: paper, grain and the inks tuned to read on it.

    Toggle group · Switch · Print

  3. Ticked off before the tide

    Each tick is drawn in where it lands and the tally keeps count; the last one completes the list.

    Checklist · Checkbox · Stamp

The index

All 78 components, A to Z. Each opens its page: a preview on paper, the install command, every state and the API.

A

B

C

D

E

F

H

I

K

L

M

N

P

Q

R

S

T

Install and theme

Patina installs with the shadcn CLI from its own registry, into your project's src/patina, where it is yours to change.

  1. Add the registry to components.json

    components.json
    {
  "registries": {
    "@patina": "https://patinaui.com/r/{name}.json"
  }
}

  2. Add the kit

    Terminal
    npx shadcn add @patina/patina

    Or one part at a time, such as @patina/index-card: each component’s page has its own command.

Make it yours

  • Theme studioPaper, inks, accent, variation and patina on real screens; export a theme.
  • BlocksWhole compositions to start from: hero, sign-in, settings, dashboard.
  • ComponentsEvery part with its states, install command and API.