Component Lab: a visual workspace for shadcn
Solo build, with AI shipping the code and me keeping it on track
- Who
- Personal projectMar 2026 – Apr 2026 (2mo)
- Scope
- ConceptDesignFull-stack engineeringAI workflow
- Tools
Shadcn
Tailwind CSS
Claude AI
Notion
Linear
Netlify
Nextjs- Links
- View projectGitHub Repo
Context
Component Lab is the tool I wished existed for shadcn
Most of my work lives in shadcn now, so building anything custom meant starting from a blank file every time. That was the part I most wanted to fix. Think Figma meets Webflow, built specifically for shadcn, and built for me first.
Working with AI
I treated the AI's environment as part of the design problem
Locked stack, CLAUDE.md for persistent context, shadcn MCP for direct registry access. Linear held tickets with acceptance criteria upfront, I documented decisions as work progressed, and captured lessons back into the AI's persistent memory.
CLAUDE.md
Decisions documented before coding meant no time lost re-litigating mid-build. Design principles like Hick, Gestalt, and Fitts shaped how the editor surfaced complexity at the structural level.
All the setup doesn't stop AI from drifting, so catching the drift is the job too.
The half-day task that became a milestone
A half-day ticket revealed the foundation needed rebuilding first
A small backlog ticket: copy a component as a starting point for a new one. Half a day, in theory. Scoping it revealed the tool needed to read any component's source and reproduce it exactly, which meant the registry files needed to be current, which meant upgrading React, Tailwind, and the entire shadcn registry first.
Half a day had become a foundation reset.
The right call was to follow it. I scoped a proper milestone for the upgrade, pushed the original task to a follow-up, and several other backlog items unstuck themselves once the foundation was right.
The official Tailwind migration tool handled config correctly, but then made over 30 incorrect changes across 60 source files. Use these tools for config only.
The parser came after, with a strict quality bar: read any component file, reproduce it byte-for-byte on export. An automated test enforced it on every change, and if a pattern wasn't recognised, the parser preserved it exactly and moved on, because reformatting would create silent problems downstream.
The false victory
Done means the new approach is everywhere and the old is gone
After shipping a new parser and unified export flow, I called the next milestone done and opened the app for the first time in hours. Parts of the interface were reading from the new parser, while others were still reading from a frozen snapshot of the old data. One panel showed eight size options for a component, the toolbar showed four, and two different products were visible at the same time.
Honestly, I'd built the interesting parts and quietly skipped the tedious one, which was getting the from-scratch builder onto the new structure. The milestone was called "Unified Editor." I had built a new engine, but I hadn't unified anything.
The proper fix shipped the next morning, with a mechanical done criterion: a specific git grep had to return zero matches. When the criterion is mechanical, there's nothing to argue about.
Outcome
Four milestones shipped, with all components passing round-trip fidelity
A working tool with three modes: browse, edit, and build from scratch. Exports follow shadcn conventions exactly. A fifth milestone covering polish, onboarding, and accounts is ongoing.
stat-card.tsx
