# SteezUI

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

- Role: Design systems engineer
- Status: Live docs + public GitHub mirror (current main)
- Stack: TypeScript, React, Next.js, CSS Modules, shadcn registry, design tokens
- Page: https://thomasjvu.com/projects/steez-ui
- Markdown: https://thomasjvu.com/projects/steez-ui.md

## Links

- [Demo](https://steez-ui-6v5.pages.dev)
- [Repo](https://github.com/thomasjvu/steez-ui)

## Metrics

- 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.

## Writeup

## 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](https://steez-ui-6v5.pages.dev). Public source: [github.com/thomasjvu/steez-ui](https://github.com/thomasjvu/steez-ui) (recruiter mirror of current `main`).