Skip to content

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.

Get startedHow it works

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.

  • −audits

    Stop paying engineers to grep

    “Where is this used?” takes one scan, across every repo, and the answer stays current.

  • −deprecations

    Plan a migration once

    See every remaining usage before you remove a component, so the work is scoped up front and not found in production.

  • −upkeep

    Stop maintaining what nobody uses

    Components with zero usages show up as exactly that. Retire them and drop the docs, tests and reviews they cost.

  • −runtime

    Nothing 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

12

times someone asks where a component is used

8

searching repos and checking results by hand

$90

what an engineer’s hour costs you, in dollars

12 × 8 h96 hours
Total$8,640
With a scanone command

Your numbers, your arithmetic. The starting values are placeholders, not benchmarks.

Every screen, from real scan data

  • Overview

    The headline numbers, and whether adoption is going up.

    Usages
    902
    Components
    15
    Repos
    6
    Deprecated in use
    1

    Adoption, last 30 days

  • Graph

    Which files render a component, and where it comes from.

    FilesComponentsPackage
    • Hero.tsx
    • Pricing.tsx
    • Footer.tsx
    • Button
    • Card
    • LegacyModal
    @acme/ui

    Button is rendered in 3 files. LegacyModal is deprecated and still in 1.

  • Pages

    Every route, with the components on it.

    • /ButtonCardBadge5
    • /pricingCardButtonTooltip5
    • /blogCardBadgeAvatar4
    • /blog/[slug]AvatarBadgeButton4
    • /contactInputSelectCheckbox5

  • Components

    What is used most, and in how many repos.

    • Button154 · 3 repos
    • Card118 · 5 repos
    • Input106 · 4 repos
    • Tooltip83 · 5 repos
    • PageHeader81 · 4 repos

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.

Pan and zoom the whole graph: every repo, file, component and package.

AAcme/Dependency graph

Everything your design system team asks about, answered from real code

  • --usage

    Component usage

    Your library’s components and your own, counted per component, repo and framework.

  • --trend

    Adoption over time

    Each scan is a snapshot, so trends build themselves.

  • --graph

    Dependency graph

    Follow a component from repo to file to render.

  • --deprecated

    Deprecation tracking

    Reads @deprecated JSDoc, then shows where old components still live.

  • --props

    Props & variants

    See which variants teams actually reach for.

  • --pages

    Page inventory

    Every route, and the components each page renders.

  • --ci

    Runs in your CI

    GitHub, GitLab, Bitbucket, Azure or any other CI. Every push to main uploads a fresh scan, private repos included.

  • --dry-run

    Your code stays put

    Names, counts and file paths are uploaded, never file contents. Preview any scan before it is sent, and hash or hide the paths.

  • --org

    Orgs & tokens

    One upload token per org. Super admins manage orgs and members.

Three steps to a full picture: no SDK, no runtime cost

  1. 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" }
}

  2. Step 2: Scan in your own CI, or locally

    The scan runs where your code already lives. It counts your components and uploads only the results: no file contents, no clone, no access to your repo.

    • In your CIevery push to main
    • On your machineuhscan scan --upload
    components
    15
    usages
    902
    repos
    6

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

  4. What it adds to your app

    0 KB

    The scanner reads your source files where they are. Nothing ships to your users, and no code is uploaded.

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.

~/acme/marketing-site
❯ 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

See where your components really live.

Get started