ns-ui

Repo: github.com/nikolas-sapa/ns-ui · Registry: design.helpmarq.com

What it is

A component registry, split into two collections: core is restrained and production-facing, Geist-dark; loud is a deliberately flashy showcase. The live registry lists the current catalog.

You install one by URL into any shadcn-configured project:

npx shadcn add https://design.helpmarq.com/r/<name>.json

That drops the source at components/ui/<name>.tsx and installs its npm dependencies. The components run from your own source, without an ns-ui runtime dependency. The CLI and MCP server automate discovery and installation.

Why it exists

Every component library solves the same 40 primitives — button, dialog, tabs, card — and then stops. The interesting part of an interface is the part nobody ships: how the gallery scrubs, how the compare slider tears, how the hero answers the cursor. That part gets rebuilt from scratch on every project because there's nowhere to get it.

The other reason: I kept building the same motion twice. Once for a client, once for a product, both times from memory, both times slightly worse than the last one. A registry is just the version of that memory I can install.

The gate

Components are checked into the registry only after a Playwright suite passes. The suite is not a snapshot test — it captures resting state and hover state and fails the component if they're the same image. A component whose "hover" does nothing visible doesn't ship.

Screenshots in both themes are generated per component, so the registry page shows the real thing rather than a marketing render of it.

For agents

GET https://design.helpmarq.com/llms.txt

One fetch returns the whole catalog as plain text: every component, its props, the situation it suits, and its exact install command. No tool definitions, no pagination, no MCP handshake required. An agent that can make an HTTP request can pick a component and install it in two steps.

llms-full.txt at the same origin adds a hand-written behavioral description per component, for the cases where several components fill the same UI role and a model has to tell them apart. Written by hand, not derived from tags, because derived text all reads the same and a model can't choose from it.

Stack

React 19, Tailwind v4, Next.js, Playwright for the visual gate, shadcn registry format, MIT.