# Ns Ui

> 223 React components you install as plain source — no runtime package. Tailwind v4 tokens, light and dark. Install with npx shadcn, or connect the MCP server and give an agent the whole catalog.

- **Type:** MCP server
- **Install:** `agentstack add mcp-nikolas-sapa-ns-ui`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [nikolas-sapa](https://agentstack.voostack.com/s/nikolas-sapa)
- **Installs:** 0
- **Category:** [Integrations](https://agentstack.voostack.com/c/integrations)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [nikolas-sapa](https://github.com/nikolas-sapa)
- **Source:** https://github.com/nikolas-sapa/ns-ui
- **Website:** https://design.helpmarq.com

## Install

```sh
agentstack add mcp-nikolas-sapa-ns-ui
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# ns-ui

[](LICENSE)
[](https://design.helpmarq.com)
[](https://github.com/nikolas-sapa/ns-ui/actions/workflows/ci.yml)

228 React components you install by URL, no package to depend on. Every one is
built around a single interaction and gated by a Playwright suite that refuses
to pass a component whose hover looks identical to its resting state.

Two collections. `core` (188) is restrained and production-facing, Geist-dark.
`loud` (40) is a deliberately flashy showcase.

Browse them live at **[design.helpmarq.com](https://design.helpmarq.com)**.

|  |  |
|---|---|
|  |  |
| **hero-particles-webgl** — a field that answers the cursor | **hero-isobar-contours** — contour lines that bunch toward the CTA |
|  |  |
| **gallery-coverflow-caustic** — drag to scrub, flick for momentum | **picker-pareto-frontier** — pick a point on a pareto frontier |
|  |  |
| **compare-crack-seam** — the before/after divider is a fracture | **not-found-knockout** — type carved out of the surface |

## Install

Any shadcn-configured project, zero config:

```bash
npx shadcn add https://design.helpmarq.com/r/.json
```

That drops the source at `components/ui/.tsx` and installs the
component's npm dependencies. There is no `ns-ui` package and nothing to keep
in sync. The code is yours to edit.

New project:

```bash
npx shadcn init -d
npx shadcn add https://design.helpmarq.com/r/gallery-coverflow-caustic.json
```

## 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. An agent that can make an HTTP request can pick the right
component and install it in two steps.

`llms-full.txt` at the same origin adds the full behavioral description per
component, hand-written rather than derived from tags, for the cases where
several components share a UI role and a model has to tell them apart.

`/registry.json` serves the standard shadcn registry index for tools that
expect it.

Prefer tools over a one-time fetch (an agent working across a whole session,
not just picking one component up front)? **[`mcp/`](mcp/)** is an MCP server
over the same catalog — `search_components`, `get_component` (full prop
signature + real source), `list_categories`, `install_command`, and
`get_conventions` (the token/theming contract). `npx -y @nikolas.sapa/ns-ui-mcp`,
stdio transport, per-client config at
**[design.helpmarq.com/connect](https://design.helpmarq.com/connect)** or
[`mcp/README.md`](mcp/README.md).

There's also a thin CLI, **[`cli/`](cli/)** (`@nikolas.sapa/ns-ui`): `npx
@nikolas.sapa/ns-ui add ` installs a component, `search`/`list`/`info`/
`categories` cover the rest of the catalog from a terminal. See
[`cli/README.md`](cli/README.md).

## The gate

`scripts/verify.ts` is why the registry stays small. It drives every component
through headless Chromium, screenshots each state against each theme, and
hard-fails on:

- a console error, or a blank render
- hover byte-identical to default, or focus identical to an unfocused baseline
  (an interaction that does not actually interact)
- dark and light byte-identical (a component that ignored the theme)
- an interactive control with no accessible name, `role=switch|checkbox|radio`
  without `aria-checked`, a visible dialog with no accessible name, or controls
  Tab cannot reach
- a popover or menu that opens but lands clipped invisible behind an ancestor's
  `overflow: hidden`, caught by hit-testing the opened element rather than
  measuring its box

The screenshots it produces are committed, so the claims above are auditable in
the repo rather than asserted here.

## Run it locally

```bash
npm install
npm run dev            # / lists components, /preview/ renders one
npm run verify         # the gate, in another shell, with dev running
```

Node 22.18 or newer.

### Environment variables

Copy `.env.example` to `.env` and fill in what you need. Everything is
optional locally — the app still runs and the email form still renders, it
just returns an error on submit if the EmailOctopus vars are unset.

| Variable | Purpose |
|---|---|
| `NEXT_PUBLIC_REGISTRY_ORIGIN` | Overrides the public origin install commands and `llms.txt` resolve against. Defaults to `https://design.helpmarq.com`. |
| `EMAILOCTOPUS_API_KEY` | Bearer key for the EmailOctopus v2 API, used by the email capture form (`lib/actions/subscribe.ts`). Server-only, never exposed to the client. |
| `EMAILOCTOPUS_LIST_ID` | The EmailOctopus list contacts are added to. |

Adding a component means creating a folder with
`component.tsx`, `demo.tsx` and `meta.json`; registration is automatic. See
[CONTRIBUTING.md](CONTRIBUTING.md), and [AGENTS.md](AGENTS.md) if you are an
agent working inside this repo.

## License

MIT. See [LICENSE](LICENSE).

## Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [nikolas-sapa](https://github.com/nikolas-sapa)
- **Source:** [nikolas-sapa/ns-ui](https://github.com/nikolas-sapa/ns-ui)
- **License:** MIT
- **Homepage:** https://design.helpmarq.com

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** yes
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** yes
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/mcp-nikolas-sapa-ns-ui
- Seller: https://agentstack.voostack.com/s/nikolas-sapa
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.