introduction
hi! blurrow/ui is 48 react components that share the same materials and the same light. they're meant to feel nice to press, type into and look at.
what it is
it started as the kit behind blogs and grew into its own thing. every component is built with react and tailwind css v4, and gets its look from a small set of css tokens (gradients and layered shadows).
run npx @blurrow/ui initin your project and it sets everything up: the package, the styles, the font. then import what you need. if you'd rather tweak a component yourself, npx @blurrow/ui add button copies its source in. the installation page has the details.
it's open source under the mit license, on github and npm. issues, ideas and pull requests are all welcome.
how it's made
one light source
every shadow assumes the light is right above the screen. top edges are lit, bottom edges sit in shade, and raised bits cast onto whatever holds them.
raised and sunken
things you press, like buttons and tab thumbs, sit above the surface. things you fill in, like inputs and tracks, sit below it.
bezel and face
buttons, cards, code blocks and menus are all built the same way. a bezel stays still and holds a face, and the face is the part that moves.
motion
when a control changes, the bit that changed slides to its new spot. if you've turned on reduced motion, everything just goes straight there.