Skip to content
Ballmac

Hire us Case study

Ballmac UI

Web · built and run by Ballmac

A component library that people and AI agents can both use.

  • Next.js
  • React 19
  • Tailwind CSS v4
  • TypeScript
  • shadcn registry
  • MCP
  • Vitest
  • Playwright

The problem

Most component libraries are built for one reader: a developer with a browser. But more and more UI is now written with an AI coding agent, and an agent that cannot find the right component, or does not know when to use it, invents a new one. The result is a product that looks inconsistent and drifts away from its design system.

We wanted a library that works for both readers: pleasant for a developer to install and change, and clear enough for an agent to choose and use correctly.

What we built

  • The library itself: 240+ components, 60+ blocks and 17 templates in one design language, on React 19 and Tailwind CSS v4, with 12 themes and a live theme builder. Both the Radix and Base UI styles of shadcn work.
  • A quality bar for every item: examples, keyboard support, reduced-motion handling, right-to-left support and one translation provider for built-in text.
  • Distribution through the shadcn registry. Everything installs into its own folder, so it never overwrites a project's existing shadcn files, and the library is listed in the official shadcn registry directory.
  • Metadata for agents. Every item says what it is, when to use it and when not to, what it composes with and how the keyboard works. That one source feeds the registry, the site, search, llms.txt and the MCP server.
  • An MCP server, @ballmac/mcp, that lets Claude Code, Cursor and other agents search the catalog, read props and source, get the exact install command and plan a whole page from blocks. It is read-only and needs no account.
  • A commercial side: a Pro tier with 150 more blocks and two starter apps, sold through checkout with licence keys, a private registry, and a browser login for buyers.
The Ballmac UI components gallery, showing a macOS-style dock, a dynamic island and a notification stack.
The component gallery, with live previews for every item.
The MCP and AI agents documentation page, with the Claude Code command to add the Ballmac server.
The MCP docs: one command connects an AI agent to the catalog.
The Ballmac UI theme builder with twelve ready-made themes.
The theme builder, with twelve themes checked for contrast in light and dark.

How we kept it reliable

A library is only useful if what you install actually works. Before each release the check installs every item into a fresh Next.js app, then type-checks and builds it. Declared dependencies are compared with the real imports, and the site and registry are covered by unit, end-to-end and accessibility tests.

The result

  • Live at ui.ballmac.com, with the whole catalog installable by name.
  • Listed in the official shadcn registry directory.
  • The MCP server is published on npm and in the MCP Registry.
  • A working Pro product with its own checkout, licence keys, login and private registry.

Next case study

Binzide

A large native Mac app, built to be private and reversible.

See all services and prices