# opensourceui: no package to install, and three files to touch per component

> bidyut10/opensourceui publishes more than 200 React and Next.js components across 30 categories as files you copy into your project rather than a library you install, wrapped in a static export site with a ten-step verify gate, four bespoke catalog and design checks, and a Cloudflare deployment that is a Worker rather than Pages.

**bidyut10/opensourceui** — Opensource UI: Free, open-source, and production-ready components for React and Next.js. Powered by TypeScript, Tailwind CSS, and lucide icons

- Repository: https://github.com/bidyut10/opensourceui
- Website: https://opensourceui.in
- Stars: 717 · Forks: 21
- Language: TypeScript
- License: MIT
- Published: 2026-09-18 · Updated: 2026-09-18 · Language: en
- Canonical page: https://hysenlabs.com/projects/bidyut10-opensourceui

## A component arrives with its own transitive imports

There is no `opensourceui` package on npm, and that is the design rather than an omission. You copy the file out of `components/` and then bring along whatever that file imports: `lib/cn.ts` plus `clsx` and `tailwind-merge`, matching files from `icons/`, `lucide-react` when the source imports it, and `next/image` when the source uses images. The rule about `"use client"` is stated as well: keep it when the source has it. The rationale for the whole approach is that most kits ask you to learn a system before one button is usable, and these are meant to be copied, so the sequence is find a component, paste the file, tweak props, and ship, with no provider setup and no theme config. Each detail page at `/components/[slug]` shows a live preview and the copy-ready source. The price is the one implied above: a file you paste is a file you now own.

## Adding a component means editing three files, not one

The preview registry is hand-maintained, and the entry format is unusual enough to be worth quoting:

```tsx
import { MyNewCard } from "@/components/text/my-new-card";

c(
  "my-new-card",
  <MyNewCard />,
  "components/text/my-new-card.tsx",
  "MyNewCard",
  {
    title: "My New Card",
    description: "Shown on the detail page.",
    usage: "<MyNewCard />",
  }
),
```

The call carries five things: a slug, a rendered element, the source path relative to the repository, the export name, and a metadata object with a title, a description, and a usage snippet. That goes into `showcaseRows` in `lib/showcase/showcase.tsx`. The same component then has to be added to `skills/opensource-ui/references/source_inventory.txt`, and `catalog.md` has to be updated as well when the listing should appear in the agent catalog. Three files for one component, two of which exist so that an AI assistant can find it.

## verify chains ten commands and the quick variant drops three

The full gate is one script: `npm run verify`, described as format, lint, types, catalog, design, tests, build, and Playwright. In the package manifest it is longer than that wording, chaining `format:check`, `lint`, `typecheck`, `check:showcase`, `check:catalog`, `check:design`, `check:jsx-space`, `test`, `build`, and `test:e2e` in order. `verify:quick` is the same list minus the build and the end-to-end tests, which is what makes it usable inside a hook. Four of those steps are bespoke scripts under `scripts/checks/`, covering showcase file existence, catalog integrity, a design guard, and JSX text spacing. Two more facts make the gate real rather than advisory: the build has a `prebuild` hook that runs `check:showcase` first, and Husky runs Prettier and ESLint on commit and the full verify on push, with GitHub CI running the same checks.

## Static export means a postbuild step that strips assets

Next.js is configured with `output: "export"`, and the documented build output directory is `out`, with the preset described as a Next.js static HTML export. Static export does not fit a Worker deployment, and the script names show the workaround: `postbuild` runs `node scripts/deploy/strip-worker-incompatible-assets.mjs` after every build. The Cloudflare path is described in the environment template as a Worker plus static assets configured through `wrangler.toml`, explicitly not Cloudflare Pages. The npm script names are where it gets confusing, since `pages:dev` and `pages:deploy` are aliases of `cf:dev` and `cf:deploy`, and `pages:upload` exists only to print a message telling you to use the other command. `cf:dev` itself is `npm run build && wrangler dev`, so a local Cloudflare run always pays for a full static export first.

## The npm package is named appui and is version 0.1.0

The `package.json` at the root is called `appui`, not `opensourceui`, at version `0.1.0`, with the description reading as free open-source UI components for React and Next.js, live at opensourceui.in. The repository has no GitHub releases. Since the components are deliberately not published as a consumable package, that version field does not track anything a consumer would install, and the site itself is the distribution channel: more than 200 components across 30 categories, with live previews and copy-ready source on every detail page. The last push to `main` is dated 2026-10-02. Two smaller signals in the tree say this is an actively edited site rather than a code library: `PRODUCT.md` sits beside `README.md`, and there is a `.node-version` file pinning the runtime in addition to the README's stated requirement of Node.js 22.x.

## Design rules are checked by a script, not left to taste

The visual system is short and specific: paper white, ink text, hairline borders, accents reserved for state, and no colored focus rings, with focus indicated by changing the border instead. Responsive styles are specified as base plus `md:` and explicitly not `sm:`. Components use `forwardRef`, accept native HTML props, and compose classes through `cn()`, and `"use client"` appears only when the browser is genuinely required. Icons live under `icons/` with kebab-case filenames and PascalCase exports:

```tsx
import { ArrowRight } from "@/icons/actions/arrow-right";
import { Bell } from "@/icons/elements/bell";

<ArrowRight size={16} />
<Bell size={20} color="#171717" className="opacity-60" />
```

Two of the ten verify steps exist to police this, a design guard and a JSX text space check. The stated reason for staying light is that the catalog has to stay easy to extend once the file is yours, dark mode being named as something to add afterwards.

## Public telemetry keys and build-time upload keys are kept apart

The environment template separates four concerns that are easy to conflate. Analytics uses `NEXT_PUBLIC_POSTHOG_KEY` alongside a public ingest host and a public UI host, both defaulting to the US endpoints. Source-map uploads use `POSTHOG_API_KEY`, `POSTHOG_PROJECT_ID`, and `POSTHOG_HOST`, marked as build-time only. Error monitoring uses a Sentry DSN that is already set in `instrumentation-client.ts` and the two `sentry.*.config.ts` files by the Sentry wizard, with a separate `SENTRY_AUTH_TOKEN` needed for uploads and explicitly not to be committed. Sponsorship checkout links are overridable through `NEXT_PUBLIC_POLAR_*_CHECKOUT_URL` values whose defaults live in `lib/site.ts`, and a Google Search Console token slot sits alongside. None of this reaches a copied component, which the documentation states directly.

## The agent entry point is one skill file and one sentence

A `skills/opensource-ui/` directory holds the agent kit, and the instruction to an assistant is a single line of text:

```text
Read skills/opensource-ui/SKILL.md and add the Opensource UI Login Form to my Next.js app.
```

Setup notes live in `AGENTS.md`. The named clients are Cursor, Claude Code, Codex, Copilot, Grok, and ChatGPT, and Cursor needs only `@skills/opensource-ui/SKILL.md` with no second copy under `.cursor/skills/`. The same directory holds the `references/source_inventory.txt` you update per component, and `catalog.md` is the listing agents read. The claim being made is worth stating plainly: copying a component does not require PostHog or Sentry, and the components do not depend on shadcn, MUI, or Radix, so an assistant adding one is not silently pulling a framework into your app.

## Conclusion

opensourceui is a reasonable choice if you want components you own outright and dislike the provider and theme setup that a component library imposes, and the copy-paste contract is stated plainly enough that you will not be surprised by it. The MIT licence covers personal and commercial use, and the copied files do not drag in shadcn, MUI, Radix, PostHog, or Sentry. Three things to decide before you commit. That you are willing to maintain copies, because a component you paste becomes a component you fork, and the library will not tell you when the upstream version changes. That you can live with the design rules, since `md:` breakpoints and border-only focus rings are enforced by a script rather than suggested. And that the deployment target suits you, since the Cloudflare path is a Worker with static assets rather than Cloudflare Pages, and two of the npm scripts for it are aliases that exist mostly to print a correction.

## FAQ

### What is opensourceui and how do I use it?

A free, MIT-licensed collection of more than 200 React and Next.js components across 30 categories, published as files you copy into your project rather than a package you install. Each detail page shows a live preview and the copy-ready source, and there is no provider setup or theme configuration to learn.

### How do I run opensourceui locally?

Node.js 22.x is required. Clone `https://github.com/bidyut10/opensourceui.git`, then run `npm install` and `npm run dev`. The homepage is served at `http://localhost:3000` and the catalog at `http://localhost:3000/components`. The repository also pins the version in a `.node-version` file.

### Do opensourceui components depend on shadcn, MUI, or Radix?

No. The copied components are React, Tailwind, and SVG, and the documentation states that copying one does not require PostHog or Sentry either. What you may need alongside a component is `lib/cn.ts` with `clsx` and `tailwind-merge`, matching files from `icons/`, and `lucide-react` or `next/image` when the source uses them.

### How is opensourceui deployed?

As a static export. Next.js runs with `output: "export"`, `npm run build` writes to `out`, and a `postbuild` script strips worker-incompatible assets. A Vercel clone button is provided, and Cloudflare is supported as a Worker plus static assets through `wrangler.toml` rather than Cloudflare Pages, using `npm run cf:deploy`.

## Sources

- [bidyut10/opensourceui on GitHub](https://github.com/bidyut10/opensourceui)
- [Issues](https://github.com/bidyut10/opensourceui/issues)
- [License: MIT](https://github.com/bidyut10/opensourceui/blob/main/LICENSE)
- [Project website](https://opensourceui.in)
- [README](https://github.com/bidyut10/opensourceui/blob/main/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/bidyut10-opensourceui