Migrate to @tomny-dev/uzi framework and showcase it on the portfolio site

[tomny-dev]

Overview

Migrate tomny.dev from Material UI (MUI v7) to @tomny-dev/uzi, a lightweight React component library. The migrated site should also serve as a live showcase of the uzi framework.

---

Current Stack

Category	Technology
UI Framework	React 19 + Material UI v7
Bundler	Vite 6.3+
Language	TypeScript ~5.7
Styling	Emotion + styled-components
Icons	@mui/icons-material

Target Stack

Category	Technology
UI Framework	React 19 + @tomny-dev/uzi (~20 components)
Bundler	Vite (unchanged)
Language	TypeScript ~5.7 (unchanged)
Styling	uzi's CSS modules internally
Icons	lucide-react or Heroicons

---

Dependencies to Remove

• @mui/material
• @emotion/react, @emotion/styled
• @mui/icons-material
• styled-components
• @mui/styled-engine-sc

New Dependency

pnpm add @tomny-dev/uzi lucide-react

---

Component Replacement Map

MUI	uzi Equivalent
AppBar	TopBar or native <nav>
Avatar	<Avatar>
Chip / Badge	<Pill>
Card / CardContent	<Card>
Button	<Button> (primary/secondary/outline/ghost)
Modal / Dialog	<Modal>
TextField	<Input> + <Label>
Select	<Select>
Checkbox	<Checkbox>
ThemeProvider + createTheme()	<ThemeProvider defaultTheme="system" defaultAccent="blue">

---

Migration Checklist

Core Migration (8 steps)

• Step 1 — Add @tomny-dev/uzi dependency and remove MUI packages
• Step 2 — Replace icon library (@mui/icons-material → lucide-react)
• Step 3 — Update app entry point: add uzi CSS import + ThemeProvider wrapper in src/main.tsx
• Step 4 — Migrate NavBar component (AppBar → TopBar)
• Step 5 — Migrate About section (Avatar + Pill for tech chips)
• Step 6 — Migrate Projects section (Card grid + Button CTAs)
• Step 7 — Simplify/remove custom theme.ts (uzi has built-in theming with accent palettes)
• Step 8 — Update App.tsx root component (remove CssBaseline, clean up MUI imports)

uzi Showcase (4 steps)

• Step 9 — Update About section: introduce yourself as creator of @tomny-dev/uzi; update tech chips to highlight React, Radix UI, CSS modules, TypeScript, Vite
• Step 10 — Transform Projects section into a Features showcase with component preview cards (Button variants, Card tones, Pill colors, Modal, Toast), quick-start code snippet (pnpm add @tomny-dev/uzi), and links to GitHub/npm
• Step 11 — Add new Components Showcase page: interactive playground with live previews of all 20+ uzi components + copyable code snippets for each
• Step 12 — Build, verify production output, check bundle size reduction vs. MUI baseline

---

Expected Benefits

• Smaller bundle: ~6 Radix UI deps vs. MUI's larger footprint
• Cleaner API: CSS modules instead of styled-components/Emotion
• Live demo: The portfolio site itself showcases what uzi can build
• Simpler theming: Built-in light/dark/system + accent palettes (blue, cyan, violet, emerald, amber, rose)

---

Key Risks / Notes

1. MUI sx props and styled-component patterns → must be replaced with uzi's CSS module approach
2. No direct icon library equivalent in uzi — need to choose a replacement
3. Theming API is completely different (MUI tokens vs. uzi accent palettes)
4. Current site is a simple portfolio (~6 source files), so the ~20 component limit of uzi should be sufficient

---

Reference Files

• src/main.tsx — App entry point, ThemeProvider wrapper
• src/App.tsx — Root component (NavBar + About + Projects)
• src/theme.ts — MUI theme config (remove or simplify)
• src/components/NavBar.tsx — AppBar → TopBar
• src/components/About.tsx — Avatar + tech chips
• src/components/Projects.tsx — Card grid showcase

[tomny-dev]

/fleet help