Opensource UI

Free React and Next.js UI you copy into your project. 200+ components across 30 categories, TypeScript, Tailwind CSS v4, and live previews. MIT for personal and commercial use — no package to install, and no paywall later.

Browse the catalog at opensourceui.in/components.

Why copy-paste

Most kits ask you to learn a system before one button is usable. These pieces are meant to be copied, not installed: find a component, paste the file, tweak props, and ship. No provider setup and no theme config.

Quick start

Node.js 22.x.

git clone https://github.com/bidyut10/opensourceui.git
cd opensourceui
npm install
npm run dev

• Homepage: http://localhost:3000
• Catalog: http://localhost:3000/components

Husky runs Prettier and ESLint on commit, then npm run verify on push. GitHub CI runs the same checks.

Use a component

There is no opensourceui npm package. Copy the file from components/, 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
• next/image, when the source uses images

Keep "use client" when the source has it. Each detail page at /components/[slug] shows a live preview and the copy-ready source.

Register a new showcase entry

Edit lib/showcase/showcase.tsx and add the component to showcaseRows:

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

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

Also update skills/opensource-ui/references/source_inventory.txt, and catalog.md when the listing should appear in the agent catalog.

AI coding agents

Works with Cursor, Claude Code, Codex, Copilot, Grok, ChatGPT, and other agents. Point the agent at skills/opensource-ui/. Setup notes are in AGENTS.md.

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

In Cursor, @skills/opensource-ui/SKILL.md is enough. You do not need a second copy under .cursor/skills/.

Stack

• Next.js 16 — App Router, static export (output: "export")
• React 19, TypeScript, Tailwind CSS v4
• cn() from clsx and tailwind-merge
• Optional PostHog analytics (NEXT_PUBLIC_POSTHOG_KEY)

Copy-pasted components are React, Tailwind, and SVG. They do not depend on shadcn, MUI, or Radix, and copying one does not require PostHog or Sentry.

Design

Paper white, ink text, hairline borders. Accents only for state. The catalog stays light so you can add dark mode after the file is yours.

• forwardRef, native HTML props, and cn() for classes
• "use client" only when the browser is required
• Responsive styles use base plus md: — not sm:
• Focus changes the border. No colored focus rings
• Icons: kebab-case files, PascalCase exports, under icons/

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

Repository

(marketing) and (docs) are route groups. They do not appear in the URL.

More detail: tests/README.md, scripts/README.md, CONTRIBUTING.md.

Deploy

Vercel

1. Import github.com/bidyut10/opensourceui in Vercel. Framework preset: Next.js.
2. Build command: npm run build. Output: out/ (static export).
3. Copy variables from .env.example only if you want PostHog, Search Console, or Sentry source-map uploads.

vercel.json sets security headers and optional /ingest rewrites for PostHog.

Cloudflare

This project deploys as a Worker with static assets, configured in wrangler.toml. It is not a Cloudflare Pages site.

Local preview: npm run cf:dev. Security headers come from public/_headers, copied into out/ at build time. On Workers, PostHog uses the direct API host. The functions/ingest/ folder is unused on this path.

Sponsors

Components stay free either way. Sponsoring is optional.

• GitHub Sponsors — support the maintainer
• opensourceui.in/sponsor — brand placement on the homepage, docs, and this README

Contributing

CONTRIBUTING.md covers setup and pull requests. Questions and sponsorships go to opensourceui.in/contact.

This project follows the Contributor Covenant.

Security

Report sensitive issues using SECURITY.md. Do not file a public issue for those.

License

MIT — personal and commercial use. Credit is welcome and not required.

Maintained by Bidyut · X · GitHub

Something broken? Open an issue on GitHub.