Skip to content

Fineliner

A shadcn/ui kit drawn the way a natural-wine label is: one pen, cream paper and a quiet hand.

npx shadcn add @fineliner/fineliner
Browse the componentsSee the blocks

Listening room · seed corner-shop

02

Drawn, not printed

A library of objects, people and rooms, each drawn by the pen from a seed: the same seed draws the same picture on the server and in the browser, and another seed draws it again by another hand. Hover one to see the line boil.

The whole libraryReroll one at the desk

03

In use

Real components doing their jobs in Listening Room, the record shop this kit was built with.

  1. A record on hold

    Jonas asked for Paper Moons. One press holds it: the ink pocket moves from the action to the record's state.

    Drawing · Badge · Button

    Paper Moons

    Odile & the Lanterns

    180 krIn the racks

  2. Booking the room

    A printed month with today ringed by the pen and Sundays struck out, and the session's length on a segmented control.

    Calendar · Toggle group

    November 2026

    1 hour in the room on Thursday 5 November, from two.

  3. The week, drawn

    Records sold by format. The pen draws every bar through its exact value; solid, outline and dotted tell the formats apart, not colour.

    Chart · Tooltip

04

The index

All 76 components, A to Z. Each opens its page: every state, drawn on paper, and the command that installs it.

A

B

C

D

E

F

H

I

K

L

M

N

P

Q

R

S

T

05

Install and make it yours

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

  1. Add the registry to components.json

    components.json
    {
  "registries": {
    "@fineliner": "https://naiveindieline.com/r/{name}.json"
  }
}

  2. Add the kit

    Terminal
    npx shadcn add @fineliner/fineliner

    Or one part at a time, such as @fineliner/record-sleeve: each component’s page has its own command.

Then