← Projects

SteezUI docs homepage overview
Docs homepage — portable UI kit with inspectable demos.

SteezUI

Shadcn-style design system with dual install paths, inspectable demos, and craft-focused primitives for design-engineering portfolios.

Design systems engineer · Live docs + public GitHub mirror (current main)

TypeScriptReactNext.jsCSS Modulesshadcn registrydesign tokens
Install paths
2
One source tree installs as npm packages or via the /r-steez shadcn registry.
Packages
3
@steez-ui/theme, @steez-ui/icons, and @steez-ui/ui.
Motion
a11y-aware
Boiling Lines intensity presets with reduced-motion support.

Overview

SteezUI is a portable UI kit: @steez-ui/theme, @steez-ui/icons, and @steez-ui/ui from one source tree, with two install paths — npm packages or the /r-steez shadcn registry. Next docs make every primitive inspectable.

Problem

Design-system demos often hide the craft that hiring managers need to see: install friction, motion edge cases, and form geometry. SteezUI treats those as the product.

What I built

A monorepo design system with token-driven theming, CSS modules, APG-aligned tabs and forms, and component pages that show preview, usage, and install together. Signature craft includes Cyberpunk Tile, FUI Button Tile, Boiling Lines (intensity presets + reduced-motion), and a Cyberpunk Slider whose fill meets the thumb center.

Hard parts

Dual install without forking the tree. Motion that still respects reduced-motion. Range controls that look intentional at every value, not only the defaults.

Result

Live docs: steez-ui-6v5.pages.dev. Public source: github.com/thomasjvu/steez-ui (recruiter mirror of current main).

Media

FUI Button Tile component demo
FUI Button Tile — signature surface treatment.
Boiling Lines motion primitive with intensity presets
Boiling Lines — intensity presets plus reduced-motion.
Cyberpunk Tile surface component
Cyberpunk Tile — signature surface.
Cyberpunk Slider at about 23 percent fill
Cyberpunk Slider — fill aligned to thumb center (~23%).
Cyberpunk Slider at about 75 percent fill
Cyberpunk Slider — fill meets the thumb (~75%).
# design-systems# react# css# a11y# tokens