Your design system, in the wild.
UhScan is an adoption and usage tool for your design system. It scans the repos your teams ship and shows what’s adopted, what’s drifting, and what should have been retired.
Works with
- React
- Next.js
- Vue
- Svelte
- Solid
- Astro
- Angular
- Lit
- Web Components
Not knowing is the expensive part
A design system costs money in the places you can’t see: audits done by hand, migrations that stall, components kept alive for no one. A scan makes those visible.
−auditsStop paying engineers to grep
“Where is this used?” takes one scan, across every repo, and the answer stays current.
−deprecationsPlan a migration once
See every remaining usage before you remove a component, so the work is scoped up front and not found in production.
−upkeepStop maintaining what nobody uses
Components with zero usages show up as exactly that. Retire them and drop the docs, tests and reviews they cost.
−runtimeNothing to run in production
It reads source code. There is no SDK in your bundle and no bill that grows with traffic.
By hand, per year
estimate
times someone asks where a component is used
searching repos and checking results by hand
what an engineer’s hour costs you, in dollars
Your numbers, your arithmetic. The starting values are placeholders, not benchmarks.
Every screen, from real scan data
Adoption, frameworks, deprecations and recent scans at a glance.
Adoption, frameworks, deprecations and recent scans at a glance.
Trace any component from repo to render
Every scan draws a graph of your repos, the files in them, the components they render and the packages those come from. This is the real graph view on sample data: pick a layout and click around.
Pan and zoom the whole graph: every repo, file, component and package.
Everything your design system team asks about, answered from real code
--usageComponent usage
Your library’s components and your own, counted per component, repo and framework.
--trendAdoption over time
Each scan is a snapshot, so trends build themselves.
--graphDependency graph
Follow a component from repo to file to render.
--deprecatedDeprecation tracking
Reads @deprecated JSDoc, then shows where old components still live.
--propsProps & variants
See which variants teams actually reach for.
--pagesPage inventory
Every route, and the components each page renders.
--ciRuns in CI
Drop in the GitHub Action and every push to main uploads a fresh scan.
--orgOrgs & tokens
One upload token per org. Super admins manage orgs and members.
Three steps to a full picture: no SDK, no runtime cost
Step 1: Point it at your design system
Add one small config file to the repo you want to measure. The scanner is a dev tool: it never ships with your app.
uhscan.config.json{ "packageName": "@acme/design-system", "importSources": ["@acme/design-system"], "repo": { "name": "marketing-site" } }Step 2: Scan locally or in CI
The CLI parses every file, counts your components and uploads the scan with an org token. Run it by hand or on every push.
- On your machine
uhscan scan --upload - In CIevery push to main
- components
- 15
- usages
- 902
- repos
- 6
- On your machine
Step 3: See adoption everywhere
Usage per component, trends over time, prop values, deprecations and the dependency graph, per repo and framework.
Top components
- Button154
- Card118
- Input106
- Tooltip83
- PageHeader81
What it adds to your app
0 KB
The scanner reads your source files; nothing ships to your users.
One command, and the whole codebase reports in
The CLI reads every file with each framework’s own compiler, counts every design-system component, and says what it couldn’t read instead of guessing.
❯ uhscan scan --upload → uhscan.config.json @acme/design-system→ framework nextjs · 214 files · 0 skipped→ 15 components · 902 usages · 6 repos→ most used Button (154)⚠ LegacyModal still used 1× (@deprecated)✓ uploaded to acme · scan #482