Opinionated Library

A small library of interface components, each built with a strong point of view. Where it helps, an entry shows the version that works next to the one that doesn't, so you can see why the choices were made.

How to use it

Pick an entry from the list on the left.
Try the demos. Click, press and listen.
Copy what you need into your own project.

What you can copy

Prompt: A ready-to-paste instruction for an AI coding tool, with the code included as a reference.
HTML: Plain HTML, CSS and JavaScript. No dependencies, and it works anywhere.
React: A React component with its styles included.
Tailwind: The same React component, styled with Tailwind classes.

Sound

Some components make a sound and some don't. When one does, you'll find a Sound switch and a choice of sound style at the top of its page. Your choice applies to the demos and to the code you copy, so you can take a version with or without sound.

Keypress

The same On / Off toggle, drawn two ways. The first uses a 1px border stroke on every edge, which reads flat and hard against the page, like a sticker. The other three skip strokes and build depth from shadows instead: a soft outer shadow, a thin edge shadow and an inner shadow along the bottom, so the selected key looks raised, like a real keycap. The dark versions push that further, and the last one gives the idle key a stroke so only the raised key relies on shadow. Click any version to hear it. The Sound switch turns the key sound on or off, both in the demos and in the code you copy.

Sound

Border strokes

Shadows

Shadows, dark

Shadows, dark outline

CopyCreamy

Border strokes

Light

Dark

Dark outline