Every component, in one material

Woolwork gives every common interface element a craft counterpart: a felt patch, a stitched seam, a snap fastener. This page shows the full set, organized by what it does. Everything on it is a live, working component built from the same stylesheet and script you would install.

Materials

Two surfaces carry every patch: felt, a flat-dyed nap, and knit, a stockinette weave built from repeating V loops. Both take fiber grain and a single top-left light, never a flat fill.

felt · cream

felt · rose

felt · leaf

knit · sky

knit · plum

knit · butter

A yarn strand: a two-tone diagonal ply twist with a top highlight, used for dividers, hamburger strands, and progress fills.

Pompoms: tied-off balls of wound yarn. Decoration only, dyed from the same tokens as everything else.

Buttons & controls

A button is a felt patch stitched to the board; pressing it settles it 1.5px into a deeper shadow, never a scale, so labels and stitches stay perfectly still. Compact round actions are real four-hole sewn buttons, thread cross and all.

a loose-thread link, pulls taut on hover

Toggle: the buttonhole The knob is a small sewn button sliding through a stitched buttonhole.

Forms

Every input is a pocket, a slit cut into the felt with the contents tucked inside. Choices are snap fasteners or sewn checkboxes; ranges are a yarn-ball bead on a stitched channel.

Your name Focus wraps a rose thread around the opening.

Preferred weight

Notes

Cross-stitched checkboxes

Wool wash

Air dry

Snap fasteners (one snaps in)

2-ply

4-ply

Yarn-ball bead slider Skein remaining (read-only)

Navigation

Tabs are felt folder tabs stitched onto a shared panel; the open one lifts. Breadcrumbs are small tags strung on one thread. Pagination is a row of patches where the current page sits pressed into the board. A dropdown is a fabric flap that unfolds, and a hamburger is three strands that pull into a cross.

Cold water, wool cycle, folded flat to dry.

Ships in three to five days, tracked.

Unused skeins returnable within thirty days.

Patterns
Sweaters
Cardigan

More options

Overlays, seams & feedback

A modal is a felt note pinned over the board with safety pins. A tooltip is a paper tag tied on with thread. An accordion unzips. A divider is a seam: a running stitch across a pressed crease.

hover or focus for a tooltip

Shipping & returns

Free shipping over forty dollars. Returns accepted within thirty days on unused skeins.

Data & status

A table is a quilt: a woven header band, rows parting at dashed seams. Chips are mini patches for compact labels, avatars are round patches with a whipstitched rim, and a notice is a fabric strip pinned to the board. Loading states are a winding spinner or basting, loose temporary stitches standing in for content that has not arrived yet.

Yarn	Weight	Left
Rose merino	DK	340g
Sky shetland	4-ply	120g
Leaf alpaca	Aran	85g

in stock low stock sold out JD

Hand wash only: this dye lot runs in warm water.

Long-form content

Reading views stay in the material too: display headings read as embroidery, quotes carry a yarn selvedge, bullets are french knots, inline code is a small pattern label, and code blocks are the one place a lined paper accent is allowed, since even a wool world needs somewhere to write things down.

An embroidered heading

The fastest stitch is the one you only sew once.

Press Ctrl + K to search, or call woolwork.toast() from anywhere in your code.

French-knot bullets, one per item
Spacing and ink come from the shared tokens

<body class="board">
  <div class="felt stitch">a patch</div>
</body>