Skip to content

Patina UI · 78 components

Components

shadcn/ui's parts with shadcn's names, props and data-slots, built on Base UI and printed in Patina. Choose their paper, inks and type in the theme studio, or start from a whole page in Blocks.

Actions5

  • A stamped label that starts an action: solid ink for the main one, a pen-line frame or less for the rest.

  • Related actions joined in one frame, so a toolbar reads as a single control rather than a row of loose buttons.

  • A mono keycap that names a key or a shortcut.

  • A stamped button that stays pressed, for one option that is on or off within a toolbar.

  • A row of stamped toggles: a segmented control for two to four views, or a set of filters that switch on and off.

Forms15

  • A month page for choosing a day or a run of days, and the date pickers built from it.

  • A pen-drawn box that takes a hand tick, for choices that are on or off.

  • A field that filters a list as you type, for picking species from a checklist too long to scroll.

  • Label, control, description and error kept together in one readable column, for building forms.

  • A calm pen-line field for a short value, as wide as the value it holds.

  • One field frame shared by an input and its units, icons or buttons, for values that need a word or an action beside them.

  • One box per digit for a short one-time code, such as the sign-in code Fieldbook sends by email.

  • The name of a control, set in the reading voice beside or above what it names.

  • The platform's own select in Patina's field, for long lists on phones and forms that must work before scripts load.

  • A short run of questions answered one card at a time, such as setting up a new expedition.

  • A set of pen-drawn circles for picking exactly one of a few options; the chosen one takes an inked dot.

  • A calm field that opens a sheet of options, for choosing one value from a list too long for radios.

  • A pen-line track with a card-stock thumb, for setting a value or a range by feel within known bounds.

  • A pill track for a setting that is on or off and takes effect at once.

  • A calm pen-line field for a few lines of notes that grows with what is written.

Overlays11

  • A calm sheet that asks for a decision before something that cannot be undone.

  • A searchable index of everything in the notebook, for jumping to a species, a place or an action by typing.

  • The actions for one thing, opened where the pointer is with a right-click or a long press.

  • A sheet pinned over the dimmed page for a task that needs full attention before returning to it.

  • A sheet pulled up from the bottom of the screen for a quick task on a phone, dismissed by swiping it back down.

  • A list of actions or view options that opens from a button and closes once one is chosen.

  • A preview that appears while a link is hovered or focused, so a reader can glance at a record without leaving the page.

  • A small sheet that opens beside its trigger for a detail or a quick edit, without leaving the page.

  • A page that slides in from an edge of the window to show a record or a short task beside the page it came from.

  • Brief slips that confirm what just happened, or offer to undo it, without taking the person away from their work.

  • A label-maker strip that names a control when it is hovered or focused.

Data display19

  • Rows of questions or sections that open one at a time, so a long page of guidance stays scannable.

  • A wash of colour with a drawn glyph that tells the reader something about the page they are on.

  • A frame that keeps its proportions as it resizes, holding a print in place until the photo it frames has loaded.

  • A person's picture in a pen circle, or a monogram print seeded by their name when there is none.

  • A small stamp that labels an entry's status or kind.

  • A sheet of card stock that groups one subject: a header, its content and its actions.

  • A row of cards to leaf through one at a time, such as the prints from a morning's sightings.

  • Code or data set in mono on a recessed sheet, with line numbers, highlighting and a copy button.

  • A section that opens and closes in place, for detail a reader asks for rather than reads by default.

  • What a list shows when it has nothing in it yet: a print, a heading, one line on why, and the one action that helps.

  • A typeset row for one record in a list, like an index entry: number, title, a one-line hook and its actions.

  • A pen-line track that fills with hatched ink as a task moves towards done.

  • Panels side by side or stacked, divided by a pen line you can drag to give one of them more room.

  • A region that scrolls inside a fixed frame, with a thin pencil scrollbar that stays out of the way of its content.

  • A dashed rule that divides entries in a list or items in a row.

  • Toned paper in the shape of content that is still loading.

  • A hand-drawn arc that turns while something of unknown length is happening.

  • A ledger for records that compare across columns: mono headings, dashed row rules and typeset figures that line up.

  • A prose container that typesets plain long-form content, such as a field note or a guide, without a class on every element.

Charts1

  • Recharts printed on the page: each series in a drum of the ink set with its own hatch, its strokes drawn by hand through the exact data points.

Conversation6

  • A file handed over with a message, as a small ticket: what it is, how big, and whether it has arrived.

  • A slip of paper holding one turn of a conversation, cut from a different stock for each side.

  • A line in a thread that is not a message: the day, where unread notes begin, or something that happened.

  • One turn in a conversation: who wrote it and when, what they said, and what can be done with it.

  • The scrolling column of a conversation: it keeps the latest note in view and offers a way back when you read up.

  • The steps an assistant took to reach an answer, numbered in order, each one open for its detail.

Patina extras14

  • Theme, paper, inks, accent, variation, patina, density and interface face as settings rows that restyle the whole page.

  • A list to tick off as you go, with a running tally, such as the checks before a count.

  • A hand-drawn map of how one thing connects to others, by kind of connection, that turns into a list on phones.

  • One question branching to its possible answers, each with its reason, with the best fit marked.

  • Numbers an entry in a run, zero padded in mono so a column of numbers lines up: No. 0012, or No. 0012 of 0200.

  • Presents one entry as a card to pick from a collection: a cover print, its number and place, a title and a one-line hook.

  • Lists entries the way a printed index does: a number, a title, its hook on the same line when it fits, and a leader to a reference.

  • Dates and places a record the way a post office cancels a stamp: a circular mark with wavy lines, struck in ink.

  • Lifts one line out of an article and sets it large, with a hand-drawn mark and who said it.

  • A thin strip along the top of the page that shows how far through an article you have read.

  • A drawn scale with the current reading circled, for judgements such as how sure an identification is.

  • Adds a numbered aside to an article without breaking the line of reading: in the margin when there is room, after the paragraph when there is not.

  • Numbered stages of a process, showing which are done, which is under way and what comes next.

  • Admits someone to a booked event: what, when and where in mono fields, and a perforated stub with the party size and a serial number.