Opensource UI

Open source alternative to Tailwind UI, Flowbite Pro, Preline UI Pro and Cruip

818 stars
MIT
Active this month
Last commit 12 days ago

Last verified Nov 4, 2026

Build React and Next.js UIs from 200+ copy-paste TypeScript components, Tailwind CSS v4, device mockups, and live previews. MIT licensed.

Visit website GitHub818

Read the full breakdownWho it is for, how it works, trade-offs, the quick start and the FAQ

who it's for

Who Opensource UI is for#

React and Next.js developers building landing pages

Opensource UI provides ready-made buttons, forms, social cards, and device mockups that paste directly into a Next.js App Router project. The TypeScript source is readable and the Tailwind classes are in the file, so there is nothing to override or configure at the app level.

Skip if:

Your project requires a fully consistent design system with shared theme tokens, accessibility certification, or Figma files. Opensource UI has no design token layer or official Figma kit.

Product teams creating app screenshots and demos

The device mockup category covers iPhone, MacBook, iPad, Apple Watch, iPod, and browser chrome frames with multiple color finishes. Drop in a screenshot and get a presentation-quality frame without Figma or a paid mockup service.

Skip if:

You need animated video mockups or motion graphics. The mockups are static React components, not video assets.

Developers working with AI coding agents

The `skills/opensource-ui/` agent kit lets any supported agent read the component catalog and add a specific component to a Next.js project in one instruction. The agent resolves the dependency chain (cn.ts, clsx, tailwind-merge, Lucide) automatically from the skill file.

Skip if:

Your team does not use AI coding tools and prefers a manual copy workflow. The agent kit is optional; the components work without it.

Developers presenting work-in-progress UI for client review

The browser chrome frames and annotation tools let you wrap a screenshot in a realistic browser window, add callout arrows and labels, and present UI that looks finished. The annotation overlays render in React, so the presentation updates when the UI does.

Skip if:

You need PDF-ready or slide-deck exports. The annotations render as React components on the web and are not an export format.

the problem

The problem it solves#

Most React component libraries require you to install a package, configure a provider at the root of your app, and stay on the library's upgrade cycle. When a dependency falls behind your version of React or Tailwind, you are stuck waiting for a maintainer update or doing a forced migration.

The pain deepens with paid component libraries: Tailwind UI, Flowbite Pro, and Preline UI Pro require a one-time purchase or subscription to access the full component set. If you cancel or the product changes pricing, you lose access. For teams that only need a handful of components for a marketing page or product demo, paying for a full kit creates friction before a single button is on screen.

how Opensource UI solves it

How it solves it#

200+ Copy-Paste TypeScript Components

The library covers 200+ components across 30 categories, including buttons, forms, tables, social cards, loaders, and Apple-style device mockups. Each component is TypeScript-first with readable props and Tailwind utility classes in the file you paste. No runtime dependency on Opensource UI is added to your project.

Device Mockup Collection

iPhone, MacBook, iPad, Apple Watch, iPod, and browser chrome frames with realistic hardware details, multiple color finishes, and slot areas where you drop in your own screenshots. Phone mockups include Titanium, Space Gray, and other finishes. The Watch frames come with sport band and seven metal finishes.

Live Preview and Copy-Ready Source

Every component detail page at `/components/[slug]` shows a live interactive preview above the TypeScript source code. You see exactly what you are getting before copying. Annotation overlays and browser chrome themes are available for presentation screenshots.

Tailwind CSS v4 Styling

Components use Tailwind utility classes written directly in the file, with `cn()` from `clsx` and `tailwind-merge` for conditional class merging. `forwardRef`, native HTML props, and `'use client'` directives follow React and Next.js conventions. No custom CSS files or global style overrides are needed.

AI Coding Agent Kit

An agent skill directory at `skills/opensource-ui/` works with Cursor, Claude Code, Codex, Copilot, Grok, and ChatGPT. Point an agent at the skill file and ask it to add a component to your Next.js app. The agent reads the catalog and handles the copy, import, and dependency chain.

strengths · trade-offs

Strengths and trade-offs#

Strengths

MIT License with No Package Lock-InEvery component is MIT licensed for personal and commercial use. You copy the file and own it; there is no Opensource UI npm package to install, update, or stay compatible with. The file is yours to rename props, restyle with Tailwind, or delete entirely.
No Cost, No PaywallThe full library is free with no subscription required and no premium tier gating components. The FAQ confirms: components stay free under MIT, sponsorships on the sponsor page are optional and do not unlock features. 818 GitHub stars and Vercel OSS program backing suggest the project is on a stable trajectory.
Static Export for Simple DeploymentThe Next.js app uses `output: 'export'` and builds to a static `out/` directory. Deployment to Vercel takes a one-click import; Cloudflare Workers with static assets uses `npm run cf:deploy`. No server-side runtime or database is needed to host the catalog.
Device Mockups in the Same RepoiPhone, MacBook, iPad, Apple Watch, iPod, and browser chrome frames live in the same component catalog as buttons and forms. Teams building app landing pages or product demos get realistic device presentations without a separate design tool or premium asset service.

Trade-offs

-Intentionally Light Theme OnlyThe catalog renders in paper white with ink text and hairline borders. Dark mode is not built into the components, by design. The README documents that the catalog uses one light visual language so previews stay consistent across the directory. You add dark variants in your own app after pasting the file.
-No Shared Component Upgrade PathBecause each component is a copied file you own, there is no mechanism to receive upstream updates automatically. If the library ships a fixed version of a component you already pasted, you must re-copy manually. This is the deliberate tradeoff of the copy-paste model: ownership at the cost of automatic updates.
-Young Repo with Unproven Long-Term Track RecordCreated in June 2026, the repo is under six months old with 818 GitHub stars and an active Vercel OSS program sponsorship. The small open issue count is positive, but the age means long-term community size and ecosystem adoption are unproven. Teams evaluating it for large production systems should weigh its maturity against more established libraries.

versus alternatives

Opensource UI vs alternatives#

Opensource UI vs Tailwind UI

Both Opensource UI and Tailwind UI provide pre-built React components styled with Tailwind CSS. The key difference is the license and pricing model: Tailwind UI charges a one-time fee for access to its full component set, while Opensource UI is MIT licensed and free for personal and commercial use with no payment required.

Feature	Opensource UI	Tailwind UI
License	MIT	Proprietary
Price	Free	One-time fee
Framework	React, Next.js	React, HTML, Vue
Device mockups	Yes	No
Agent skill kit	Yes	No

Opensource UI is the better choice when you need production-ready components for a React or Next.js project without a purchase. Tailwind UI is worth the fee when you need a larger, more battle-tested catalog with HTML and Vue support, official Figma files, and Tailwind Labs backing.

Opensource UI vs Flowbite Pro

Flowbite Pro is a paid extension of the free Flowbite library, adding premium components for purchase or subscription. Opensource UI offers a comparable set of UI primitives under MIT at no cost, but without Flowbite Pro's Figma kit or multi-framework support.

Feature	Opensource UI	Flowbite Pro
License	MIT	Proprietary
Price	Free	Subscription or one-time fee
Framework	React, Next.js	HTML, React, Vue, Angular, Svelte
Device mockups	Yes	No
Figma kit	No	Yes

Opensource UI is the right pick when your stack is React or Next.js and you want free copy-paste components with TypeScript source you own. Flowbite Pro is the better fit when your team needs multi-framework support, an official Figma design kit, or a subscription model with professional support.

install · quick start

Quick start#

bash

Self-host the Opensource UI catalog by cloning the repo and starting the dev server (requires Node.js 22.x).

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

tech stack · detected from GitHub

What it's built on#

Languages: JavaScriptTypeScript
Frameworks: Next.jsReact

frequently asked

FAQ#

Is Opensource UI really free for commercial use?

Yes. The MIT license covers personal and commercial use with no restrictions. The FAQ on opensourceui.in confirms there is no catch: sponsorships on the sponsor page are optional and do not gate components. You copy the files and use them in a client project without attribution required.

Is there an npm package for Opensource UI?

No. There is no opensourceui npm package. The documented install path is to copy the TypeScript source from the components directory into your own project. The README covers the dependency chain: bring along lib/cn.ts, clsx, tailwind-merge, and lucide-react when the component imports them.

Does Opensource UI work with shadcn or Material UI?

Opensource UI is an independent project with its own design system. The README explicitly states it does not depend on shadcn, MUI, or Radix, and copying a component does not require any of them. The two can coexist in the same project if needed, but Opensource UI components are standalone files.

How do I self-host the Opensource UI catalog?

Clone the repo, run npm install, and run npm run dev on Node.js 22.x. The build command is npm run build, which produces a static export to out/. Vercel, Cloudflare Workers, and any static host can serve the output. No database or server-side runtime is required.

What design system does Opensource UI follow?

Paper white, ink text, hairline borders, and accents only where state or demos need them. Motion respects prefers-reduced-motion. Responsive styles use base plus md: breakpoints. The catalog intentionally has no dark mode so previews stay consistent; you add dark variants in your own app after pasting.

also worth a look

Similar open-source tools#

Untitled UI React

Alternative toTailwind UI

Open source React UI component library with Tailwind CSS

1,989 GitHub stars
Licence MIT

21st.dev

Alternative toTailwind UI

Browse and install production-ready shadcn/ui components via CLI

2,263 GitHub stars
Licence MIT

Hallmark

InDesign & Creative

Design skill for coding agents with 48 themes, real photos and lint.

46,131 GitHub stars
Licence MIT

Rust

InWeb Development

Systems language with memory safety and no garbage collector.

120,972 GitHub stars
Licence Apache-2.0

OpenCreator

Alternative toHeyGen

Local AI workspace for video, image, voice, and translation

14,090 GitHub stars
Licence Apache-2.0

Caret

Alternative toPlasmic

Your design canvas is backed by real files in git

44 GitHub stars
Licence Apache-2.0

by category

Open source tools in these categories#

204

12,889 GitHub stars
Licence AGPL-3.0
#Email

rakazo

Alternative toGrok Bot

AI teammates you own: your keys, your model, your machine.

6,568 GitHub stars
Licence Apache-2.0
#AI Agents

SnitchFeed

Live monitoring on LinkedIn, X, Reddit & more. Agentic social listening for startups.

Marketing & Growth

Advertise your product

The projects we add and every new guide. Free, unsubscribe any time.

Find open source alternatives to paid software

Opensource UI vs Tailwind UI

Feature	Opensource UI	Tailwind UI
License	MIT	Proprietary
Price	Free	One-time fee
Framework	React, Next.js	React, HTML, Vue
Device mockups	Yes	No
Agent skill kit	Yes	No

Opensource UI vs Flowbite Pro

Feature	Opensource UI	Flowbite Pro
License	MIT	Proprietary
Price	Free	Subscription or one-time fee
Framework	React, Next.js	HTML, React, Vue, Angular, Svelte
Device mockups	Yes	No
Figma kit	No	Yes

Who Opensource UI is for#

React and Next.js developers building landing pages

Skip if:

Product teams creating app screenshots and demos

Skip if:

Developers working with AI coding agents

Skip if:

Developers presenting work-in-progress UI for client review

Skip if:

The problem it solves#

How it solves it#

200+ Copy-Paste TypeScript Components

Device Mockup Collection

Live Preview and Copy-Ready Source

Tailwind CSS v4 Styling

AI Coding Agent Kit

Strengths and trade-offs#

Strengths

Trade-offs

Opensource UI vs alternatives#

Opensource UI vs Tailwind UI

Opensource UI vs Flowbite Pro

Quick start#

What it's built on#

FAQ#

Similar open-source tools#

Open source tools in these categories#

Web Development

Design & Creative

Developer Tools

Web & App Development

Find open source alternatives to paid software

Who Opensource UI is for#

React and Next.js developers building landing pages

Skip if:

Product teams creating app screenshots and demos

Skip if:

Developers working with AI coding agents

Skip if:

Developers presenting work-in-progress UI for client review

Skip if:

The problem it solves#

How it solves it#

200+ Copy-Paste TypeScript Components

Device Mockup Collection

Live Preview and Copy-Ready Source

Tailwind CSS v4 Styling

AI Coding Agent Kit

Strengths and trade-offs#

Strengths

Trade-offs

Opensource UI vs alternatives#

Opensource UI vs Tailwind UI

Opensource UI vs Flowbite Pro

Quick start#

What it's built on#

FAQ#

Similar open-source tools#

Open source tools in these categories#

Web Development

Design & Creative

Developer Tools

Web & App Development

Find open source alternatives to paid software