Skip to content
Harjot Singh Rana

Full-Stack & AI Product Engineer

All projects

Brio UI

Interaction-first React component library for the parts every website needs: forms, pricing, consent, changelogs, 404s, usage, and inboxes. Each component is one self-contained file you can copy into any React 19 project, themeable through library tokens.

GitHubLive
Screenshot of Brio UIScreenshot of Brio UI (dark mode)

Stack

React 19TypeScriptMotionVite

What I built

  • Designed and built 50 composed React components for everyday website sections.
  • Single-file components: styles injected with React 19 style hoisting, no CSS build step.
  • Runtime dependencies limited to react, react-dom, and motion.
  • Shadcn-compatible registry so components install with one command.
  • Scaffolding script that creates, registers, and routes a new component.

Key features

  • Higher-level patterns on top of base primitives, not another button library
  • Neutral default variant that fits a bank, a dashboard, or a blog
  • Theme tokens shared across every component
  • Playground with a live demo for each component
  • Copy-paste install or shadcn registry install