← All reports

shadcn-ui/ui

Composable, accessible components with thoughtful defaults. Build your own component library with code you can customize, extend, and make your own.

★ 127k · react, next, tailwind · scanned 2026-10-26 at 8f04138

97
design health · mostly tokenized
How this is scored · CLI 0.8.12
Value discipline
57/60
Token health
20/20
Consistency
10/10
Critical issues
10/10

The path to 100: 3 points

  • +3 Replace the hardcoded values in 35 of the 41 findings with tokens or scale steps, and remove or reuse 4 unused components and repeated patterns · Value discipline
Left alone: 2 values the code marks as deliberate · not counted in the score

Buoy skips a value when a comment explains it or marks it as known debt, when it is a 2–3px optical nudge, or when the commit that added it says it was deliberate. 2 optical nudges.

41
hardcoded-value findings
plus 40 in vendored shadcn/ui files, not scored
416
design tokens found
2,671
components

Most repeated literal colours

No repeated literal colours.

Most repeated literal spacing

  • 0.3rem2×
  • -0.45rem2×
  • -0.35rem2×
  • 14px1×
  • 0.2rem1×
  • 160px1×
  • 0.25em1×
  • 0.1rem1×

Files with the most drift

Drift by type

  • Hardcoded values81
  • Repeated patterns4

Examples

apps/v4/app/(app)/(create)/components/item-explorer.tsx:62
apps/v4/app/(app)/(create)/components/item-explorer.tsx
  • text-[0.8rem] (line 62)
  • text-[0.8rem] (line 82)
apps/v4/app/(app)/(styles)/sera/media-library-table/components/asset-table.tsx:135
apps/v4/app/(app)/(styles)/sera/media-library-table/components/asset-table.tsx
  • text-[0.5rem] (line 135)
  • text-[0.625rem] (line 151)
apps/v4/app/(app)/(styles)/sera/media-library/components/asset-details.tsx:49
apps/v4/app/(app)/(styles)/sera/media-library/components/asset-details.tsx
  • text-[0.625rem] (line 49)
  • text-[0.625rem] (line 56)
  • text-[0.625rem] (line 62)
apps/v4/app/(app)/(styles)/sera/media-library/components/asset-grid.tsx:138
apps/v4/app/(app)/(styles)/sera/media-library/components/asset-grid.tsx
  • text-[0.625rem] (line 138)
  • text-[0.625rem] (line 154)
apps/v4/app/(app)/(styles)/sera/page.tsx:43
apps/v4/app/(app)/(styles)/sera/page.tsx
  • text-[2.875rem] (line 43)
apps/v4/app/(app)/docs/[[...slug]]/page.tsx:95
apps/v4/app/(app)/docs/[[...slug]]/page.tsx
  • text-[1.05rem] (line 95)
  • sm:text-[15px] (line 95)
  • text-[1.05rem] (line 141)
apps/v4/app/(app)/docs/changelog/page.tsx:45
apps/v4/app/(app)/docs/changelog/page.tsx
  • text-[1.05rem] (line 45)
  • sm:text-[15px] (line 45)
  • text-[1.05rem] (line 62)
apps/v4/components/block-viewer.tsx:339
apps/v4/components/block-viewer.tsx
  • mr-[14px] (line 339)
apps/v4/components/chart-code-viewer.tsx:40
apps/v4/components/chart-code-viewer.tsx
  • rounded-[6px] (line 40)
apps/v4/components/chart-copy-button.tsx:41
apps/v4/components/chart-copy-button.tsx
  • rounded-[6px] (line 41)
apps/v4/components/chart-toolbar.tsx:36
apps/v4/components/chart-toolbar.tsx
  • rounded-[6px] (line 36)
apps/v4/components/chart-toolbar.tsx:28
apps/v4/components/chart-toolbar.tsx
  • text-[13px] (line 28)

What Buoy would do about it

Maintainers: this scan used the MIT-licensed CLI at commit 8f04138. Run it yourself with npx @buoy-design/cli show health, or install the GitHub App to get the fix suggested on every PR. If anything here is wrong, open an issue and we will correct the page. If you would rather this report not be public, email support@buoy.design and we will take it down.

The score describes how much of the UI goes through design tokens, not the quality of the product or the team. Scores can shift between CLI versions as detection improves; this one was produced by CLI 0.8.12. How the score works.