Fineliner · 76 components
Components
shadcn/ui's parts with shadcn's names, props and data-slots, built on Base UI and drawn with one pen. Start from a whole page in Blocks.
Actions
Starts an action: a pocket of solid ink for the one thing to press, a drawn frame or less for the rest.
Related actions joined in one drawn frame, so a toolbar reads as a single control rather than a row of loose buttons.
Forms
A printed month for choosing a day or a run of days, and the date pickers built from it.
A drawn box the pen ticks, for choices that are on or off; the tick runs past the box, as a hand's does.
A field that filters a list as you type, for finding one record, or several, in a catalogue too long to scroll.
Label, control, description and error kept together in one readable column, for building forms.
A single line of text inside a steady pen line, as wide as what it holds.
One steady field line shared by an input and its units, icons or buttons, for values that need a word or an action beside them.
One drawn box per digit for a short one-time code, such as the sign-in code Listening Room sends by email.
Names a control in the reading voice, beside it, so a click on the words reaches the control.
The platform's own select in a steady pen field, for long lists on phones and forms that must work before scripts load.
A short run of questions answered one sheet at a time, such as booking the listening room.
Circles the pen draws, for picking exactly one of a few options; the chosen one takes an inked dot.
A steady field that opens a framed sheet of options, for choosing one value from a list too long for radios.
A pen line with a paper thumb, for setting a value or a range by feel within known bounds.
A drawn pill for a setting that is on or off and takes effect at once; on, the pen fills it with ink.
A few lines of notes inside a steady pen line, growing with what is written.
A button that stays down, for one option that is on or off; pressed, the pen puts a pocket of ink under it.
A row of toggles: a segmented control in one drawn frame for two to four choices, or a set of filters that switch on and off.
Overlays
A drawn sheet that asks for a decision before something that cannot be undone.
A searchable index of the shop, for jumping to a record, a person or an action by typing.
The actions for one thing, opened where the pointer is with a right-click or a long press.
A drawn sheet centred over the dimmed page, for a task that needs full attention before returning to it.
A drawn sheet pulled up from the bottom of the screen for a quick task on a phone, dismissed by swiping it back down.
A drawn 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 or a person without leaving the page.
A small drawn sheet that opens beside its trigger for a detail or a quick edit, without leaving the page.
A drawn sheet laid along one edge of the window, for 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 anyone away from what they were doing.
A slip of ink that names a control, or defines a term, while it is hovered or focused.
Navigation
The trail from the top of the shop to the page you are on, each step a link back, joined by small pen chevrons.
Tells every primitive which way the page reads, so menus, sliders, keyboard arrows and the pen's arrows follow right-to-left text.
A desktop app's row of menus, each holding the commands for one area, moved through with the arrow keys.
A site's main links, with panels that open to show the pages in each section; the page you are on is underlined.
Typed page numbers for moving through a long list a page at a time, the current page ringed by the pen.
An app's main navigation in a column beside the page, which folds to icons on a desktop and becomes a sheet on a phone.
Labels on a pen rule that switch between views of one thing, the current one underlined by hand.
Data display
Rows of questions or sections that open one at a time, so a long page of answers stays easy to scan.
A note in the page's margin, with a pen mark by its title, that tells the reader something about where they are.
A frame that keeps its proportions as it resizes, holding a drawing in place until the picture it frames has loaded.
A person's picture in a drawn circle, or a portrait drawn from their name when there is none.
A small framed label for a record's status or kind; a pocket of ink for the rare loud one.
Groups one subject: open on the page by default, framed by the pen when containers are boxed.
A row of slides to leaf through one at a time, such as this week's records on the counter.
Code or data typed on a well of tint, with line numbers, highlighting in one pen 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 drawing, a title, one line on why, and the one action that helps.
An open row for one thing in a list: a drawing or an icon, a title, one line about it and its actions.
A typewriter keycap that names a key or a shortcut.
A drawn track that fills with a pocket of 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.
One wobbling pen line that divides entries in a list or items in a row.
A quiet pocket of tint in the shape of content that is still on its way.
A pen ring that turns while something of unknown length is happening.
A ledger for records that compare across columns: label heads over a pen rule, hand-drawn rules between rows and figures that line up.
A prose container that typesets plain long-form content, such as a shop newsletter or a guide, without a class on every element.
Charts
Recharts drawn with the page's one pen: strokes through the exact data points, series told apart by solid, outline and dotted marks.
Conversation
A file handed over with a message, as a small ticket: what it is, how big, and whether it has arrived.
One turn of a conversation: a pocket of tint for your own words, a drawn line round the other side's.
A line in a thread that is not a message: the day, where unread messages 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 message 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.
Fineliner extras
Every appearance setting (light, paper, pen, hand, line boil, containers, labels and density) as settings rows that restyle the whole page.
The label's border round any region: four pen strokes that run past or stop short of their corners, single or doubled, resizing with what they hold.
A numbered copy in the typewriter, zero padded so a run lines up: Nº 0127, Nº 0127 of 500, or set up a spine.
An aside in the hand voice with a drawn arrow toward what it is about, under its line or out in the margin.
A label from a bottle or a sleeve: a drawing in a drawn border, words up its spine, a kicker and a title, lettered or in the reading face.
A hanging tag with a punched hole and a loop of string: the price in the typewriter, an old price struck through by the pen.
A line lifted out of an article and set large, against a pen-ruled margin with quotation marks drawn by the pen.
A pen line along the top of the page that draws itself as the reader scrolls through an article.
A square sleeve with a drawn cover, the title lettered, the artist and the catalogue number up the spine, and the record peeking out.
A page head with a scene drawn by the pen and the title lettered beside or under it, drawn on the first time it is seen.
A wine on the shop's list: name and producer, grape, region and year in the typewriter, a note in the hand, the price and a drawn bottle or glass.
A record's sides as lists, with numbers and running times in the typewriter, dotted leaders, and the playing track marked by the pen.