Skip to content
Fineliner

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

01

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.

The whole libraryReroll one at the deskDraw your own

02

In use

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

  1. A record on hold

    A customer asks the shop to keep a record for them, and one press holds it.

    Drawing · Card · Badge · Button

    Paper Moons

    Odile & the Lanterns · LP · 180 kr

    In the racks, 2 copies
    “Could you keep one for me until Saturday?”
    Jonas, on Tuesday

  2. Booking the room

    Choosing an evening in the listening room and how long to stay. The shop is closed on Sundays.

    Calendar · Toggle group

    November 2026

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

  3. The week, drawn

    Records sold this week, by format: the pen draws each bar through its exact value.

    Chart · Tooltip

03

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

04

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