开源UI：免费、开源且面向生产环境的React和Next.js组件。由TypeScript、Tailwind CSS和lucide图标驱动
概览
免费的React/Next.js组件，采用Tailwind CSS和TypeScript构建。无订阅，无付费墙。浏览实时预览、设置指南和可复制的源代码，网址为 /components。 大多数UI套件要么看起来一样，要么需要你先学会整个系统才能用一个按钮。我想要更接近我实际工作方式的东西：找一个看起来不错的组件，把文件放进项目里，调整道具，然后继续。 这些组件是用来复制的，而不是作为包安装的。没有提供者封装器，也没有主题配置需要解码。每个文件都是自包含的。 图标是普通的 SVG React 组件，包含在 icons///，没有额外的 npm 包。我也用 nexticons.in 和它们一起使用。 开源UI支持编码代理——Cursor、Claude Code、Codex、Copilot、Grok、ChatGPT等。 代理工具包包含技能工作流程及参考文档（目录、设计系统、实施指南和文件清单）。请参阅工具的设置步骤和示例提示。
概述（AI 翻译）
免费的React和Next.js你复制到项目中的UI。200+组件，涵盖30个类别，TypeScript、Tailwind CSS v4和实时预览。MIT用于个人和商业用途——无需安装包，也无需付费墙。
请在 opensourceui.in/components 浏览目录。
为什么要复制粘贴
大多数套件要求你先学会一个系统，才能让一个按钮可用。这些部件是用来复制的，不是安装的：找组件，粘贴文件，调整道具，然后发货。没有提供服务设置，也没有主题配置。
快速开始
Node.js 22.x。
| 命令 | 它的作用 |
|---|---|
npm run dev |
开发服务器 |
npm run build |
静态导出到 out/（先运行 check:showcase |
npm run lint |
ESLint |
npm run typecheck |
tsc --noEmit |
npm run format |
更漂亮，顺风级分类 |
npm run test |
测试单元测试 |
npm run verify |
全套：格式、字体、目录、设计、测试、制作、剧作家 |
本页由 AI 翻译，技术细节请以原文为准。
README
以下为原文 README 节选，完整内容请查看原文。
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
| Command | What it does |
|---|---|
npm run dev |
Dev server |
npm run build |
Static export to out/ (runs check:showcase first) |
npm run lint |
ESLint |
npm run typecheck |
tsc --noEmit |
npm run format |
Prettier, with Tailwind class sorting |
npm run test |
Vitest unit tests |
npm run verify |
Full gate: format, lint, types, catalog, design, tests, build, Playwright |
npm run verify:quick |
Same gate without build and end-to-end tests |
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, plusclsxandtailwind-merge- Matching files from
icons/ lucide-react, when the source imports it
推荐工具
换一个关键词，或者移除筛选条件。
安装
npx skillfish add bidyut10/opensourceui