# I built a React UI kit with a licensing guard baked in (MIT, 0 deps)


Most React component libraries solve layout. None of them solve the problem I kept hitting: how do you gate a feature behind a license tier without wiring up a bespoke billing UI every single time?

That's what `@seosiri/developer-ui-kit` is for.

## The problem

If you're building a SaaS dashboard, an AI agent control plane, or any developer tool with a free/Pro/Enterprise split, you end up rebuilding the same thing every project: a component that checks a license token, shows the right UI state, and doesn't leak a "premium" feature to a free-tier user. It's not hard, but it's repetitive, and it's easy to get subtly wrong.

## What it is

`@seosiri/developer-ui-kit` v1.0.1 is a framework-agnostic, TypeScript-first React component library built around a **Flexible Licensing Guard** — it validates token prefixes (`PRO_` / `ENT_`) locally or against a backend, and renders the matching feature tier.

A few things about how it's built:

- **Zero dependencies.** Check the [npm listing](https://www.npmjs.com/package/@seosiri/developer-ui-kit) yourself — 0 Dependencies. No supply-chain surface you didn't sign up for.
- **Pure React, inline styling.** No CSS provider wrapper, no theme context you have to configure before anything renders. It compiles cleanly across Vite, Next.js, Electron, and even Atlassian Forge.
- **MIT licensed.** Open core, gated tier — the split is disclosed, not obscured. Fork it, audit it, ship it.

## Quick start

```bash
npm install @seosiri/developer-ui-kit
```

```tsx
import { UniversalSaaSWidget } from '@seosiri/developer-ui-kit';

export default function DashboardPage() {
  return (
    <UniversalSaaSWidget
      productName="Your Product"
      productVersion="1.0.1"
      accentColor="#0284c7"
      theme="dark"
      onProTask={() => runYourProFeature()}
    />
  );
}
```

That's it — no provider setup, no context boilerplate.

## Where this is headed

This is the first release (1.0.1), and it's already running inside SEOSiri's own developer tooling and MCP ecosystem work. If you're building a dashboard that needs tiered features and you're tired of writing the same license-check component for the fourth time, give it a shot and open an issue if something's rough.

- 📦 [npm](https://www.npmjs.com/package/@seosiri/developer-ui-kit)
- 💻 [GitHub](https://github.com/SEOSiri-Official/developer-ui-kit)
- 📖 [Full write-up with architecture diagrams](https://www.seosiri.com/2026/09/developer-ui-kit.html)

Feedback and PRs welcome.