bidyut10/opensourceui
Developer toolsЭта страница переведена автоматически. Технические детали смотрите в оригинале. Открыть оригинал
Opensource UI: бесплатные, открытые и готовые к производству компоненты для React и Next.js. Работает на TypeScript, Tailwind CSS и иконках Lucide
Обзор
Премиальные бесплатные компоненты React/Next.js, построенные на Tailwind CSS и TypeScript. Без подписок, без платных доступов. Просмотрите с живыми превью, руководствами по настройке и готовым к копированию исходным кодом на /components. Большинство UI-китов либо выглядят одинаково, либо требуют изучения всей системы, прежде чем использовать одну кнопку. Я хотел что-то ближе к тому, как я на самом деле работаю: найти компонент, который выглядит хорошо, вставить файл в проект, подстроить реквизит и двигаться дальше. Эти компоненты предназначены для копирования, а не для установки как пакет. Нет обёрток провайдера, нет конфигурации темы для декодирования. Каждый файл самодостаточен. Иконки — это обычные компоненты SVG React в иконках/— без дополнительного пакета npm. Я также использую nexticons.in вместе с ними. Opensource UI работает с агентами кода — Cursor, Claude Code, Codex, Copilot, Grok, ChatGPT и другими. Комплект агентов используется и включает рабочий процесс навыков и справочную документацию (каталог, система проектирования, руководство по внедрению и инвентаризация файлов). Смотрите шаги настройки по инструментам и примерные запросы.
Обзор (машинный перевод)
Бесплатный React и Next.js UI, который вы можете скопировать в свой проект. 200+ компонентов по 30 категориям, TypeScript, Tailwind CSS v4 и живые превью. MIT для личного и коммерческого использования — пакета для установки нет и нет платного доступа позже.
Просмотрите каталог по адресу opensourceui.in/components.
Зачем копировать-вставлять
Большинство наборов требуют изучить систему, прежде чем одна кнопка станет пригодна. Эти элементы предназначены для копирования, а не для установки: найти компонент, вставить файл, настроить реквизиты и отправить её. Нет настройки провайдера и нет настройки темы.
Быстрый старт
Node.js 22.x.
- Главная страница: http://localhost:3000
- Каталог: http://localhost:3000/components
| Command | Что он делает |
|---|---|
npm run dev |
Dev server |
npm run build |
Статический экспорт в out/ (запускается check:showcase первым) |
npm run lint |
ESLint |
npm run typecheck |
tsc --noEmit |
npm run format |
Красивее, с сортировкой класса Tailwind |
npm run test |
Тесты Vitest |
npm run verify |
Полный гейт: формат, ворсинки, типы, каталог, дизайн, тесты, сборка, драматург |
Эта страница переведена автоматически. Технические детали смотрите в оригинале.
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