Skip to content

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.