npx ahoybuoy show health

One command.
See every component.

Don't have a formal design system? Doesn't matter. See what's actually in your codebase.

Try it now See the output

Your component inventory.

Every component in your codebase, listed and categorized. Finally, clarity.

Terminal
$ npx ahoybuoy show health
Component Alignment
⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁⛁
46/46 components · 100% aligned
Aligned:
NavigationPartial
LayoutCshtml
FooterCshtml
SidebarCshtml
BannerCshtml
PaginationPartial
ShareButtonsCshtml
SocialsPartial
LoginPartialCshtml
MessagesPartial
TagsPartialCshtml
LabelsPartialCshtml
PhotoViewerPartial
RecaptchaCshtml
TurnstileCshtml
... and 31 more
✓ 46 components discovered.
🤯

Finally see what's actually in your codebase.

The building blocks you can affect, improve, document, and design for. No more guessing. No more "I think we have a sidebar somewhere."

Now you know what's there.

Use this list to build a real design system — or just understand what you're working with.

🎨
Match to Figma
Create Figma components for each one. Build your design library from code truth.
📖
Add to Storybook
Know exactly which components need stories. Prioritize what matters.
🖼️
Sync with Framer
Build prototypes with the real components your codebase actually has.
📝
Document
Create a component inventory. Share it with your team. Everyone knows what exists.

You can't design for components you don't know exist. Now you know.

The codebase is a black box.

For designers, code has always been invisible. You know your Figma file. You don't know the codebase.

The Old Way
❓
"What components do we actually have?"
❓
"Is there already a sidebar component?"
❓
"Where's the navigation partial?"
❓
"What can I actually affect as a designer?"
🤷
Ask a developer. Wait. Maybe get an answer.
With Buoy
$
npx ahoybuoy show health
⚡
...2 seconds later...
📦
NavigationPartial, LayoutCshtml, FooterCshtml, SidebarCshtml, BannerCshtml...
✓
Every component. Listed. Named. Visible.

No formal design system? Perfect.

You don't need tokens or Storybook to use Buoy. It finds what's already there.

📦
"What components exist?"
Get a complete inventory of every reusable piece in your codebase.
🔍
"Where's that sidebar thing?"
Find components by name. See exactly where they live.
🏗️
"What are the building blocks?"
See layouts, partials, views — the architecture of your UI.
🎯
"What can I design for?"
Know which components exist so you can create matching designs.
📋
"What needs documenting?"
Use the list to prioritize which components to add to Storybook.
🚀
"Where do I start?"
This list IS your starting point. Build your design system from here.

One language. Two audiences.

Whether you're a designer or a frontend engineer, the output speaks to you.

🎨
For Designers
Design System Leads
  • ✓ See if your design system is actually being used
  • ✓ Prove adoption with real numbers
  • ✓ Find where tokens are being bypassed
  • ✓ No code knowledge required
⚡
For Engineers
Frontend Developers
  • ✓ Quick codebase health check before PRs
  • ✓ Find and fix drift during development
  • ✓ Exact file paths and line numbers
  • ✓ Integrates with CI/CD pipelines

Just one line.

No install. No config. No learning curve.
Copy, paste, understand.

npx ahoybuoy show health
View on GitHub

Works with React, Vue, Svelte, Angular, and more.