Since launch
Build Better InterfacesFree
Opensource UI gives you free React and Next.js components to copy into your own code. Phone mockups, forms, widgets, and more, with live previews so you can see what you're getting. MIT licensed, for personal and commercial use.
Unique people
Per session
05 min
why us?
Obsessively Detailed. Effortlessly Beautiful.
Designed with precision, from the frame curves to the smallest hardware details, so your apps and websites look as polished as the products they deserve.
Premium Finishes,Endless Possibilities.
Choose from beautifully crafted color variants like Titanium, Space Gray, and more. Every finish is meticulously designed with realistic materials, accurate hardware details, and pixel-perfect precision to make every presentation feel premium.
Opensource UI
Ship UI faster
Copy-paste components for your next project
Built for the Watch. Ready for Your UI.
Apple Watch frames with sport band, rounded display, and seven metal finishes. Drop in complications, fitness rings, or now-playing screens — and present wrist UI that feels native, not pasted on.
The Classic iPod. Your Screen Inside.
Screen slot, click wheel, and nostalgic colorways — silver, black, pink, blue, and more. Drop in music players, menus, or retro UI and make every presentation feel instantly memorable.
iPod
Music
Photos
Extras
Settings
›Designed to Blend In. Built to Stand Out.
Wrap your UI in light, dark, or transparent browser chrome. Pick a theme, drop in your screenshot, and present web work that feels finished before you ship.
https://bidyut.cc
Loading layout
Draw attention where it matters most with clean, customizable annotations. Add arrows, labels, and callouts to explain features, document interfaces, and create presentations that communicate with clarity and confidence.
view more annotationsDesigned to Keep Time in Style.
Explore carefully designed clock variants that balance functionality, elegance, and customization for any project.
Clock
--:--
Clock
--:--
Clock
--:--
Interactive Components That Feel Alive.
Polished widgets inspired by modern design systems, built with smooth interactions and thoughtful details that users notice.
view more widgetsWriting That Feels Natural.
Designed to feel like a real writing space, complete with a notebook layout, live word count, save indicators, and an experience that encourages focused writing.
Morning pages
Saturday, Jun 6
0 words
under the hood
How They're Crafted.
Built on the stack you already trust — React and Next.js for components that fit your app, TypeScript for props you can rely on, Tailwind CSS v4 for styling that stays in your codebase, and Lucide for icons. Every file is production-ready, readable, and yours to own.
A Developer Experience You'll Love.
Search for a component, open it, and everything is right there — preview up top, details and code below. No digging, no extra steps. Copy and paste into your project when you're ready — MIT licensed, free for personal and commercial use. No install, no lock-in.
Preview1
Component Name2
Annotation Text
Code3
export function Card() {
return <div />;Copy Code
4Button
community
What People Are Saying.
Real feedback from Product Hunt and Twitter — on cohesion, spacing, typography, and how easy the components are to drop into real projects.
The way each component feels cohesive without being overly uniform is genuinely impressive. Spacing, type, and interaction details across 33 categories usually fall apart at scale, but this holds together with real care.
Niyazi Gözkenç
Product HuntThe attention to detail in each component really shows, especially how the spacing and typography stay consistent across so many categories. Feels like a curated set rather than a dump of files.
Boran
Product HuntI stumbled via Twitter on your component library. It's pretty neat. I ended up looking around your site and saw your device playground — that definitely got my attention.
Seam
The CEO of Seampretty cool collection mate! upvoted
Saïd Aitmbarek
The founder of MicrolaunchGenuinely well put together — 154 components across 26 categories is no joke, and the tone throughout feels intentional, not templated
Patrick Chen
The founder of runs.spacebuilt with
Resources & Sponsors.
Tools, people, and services that power Opensource UI — plus a spot for sponsors who want to support the project.
Sponsors
Resources
Cursor / For Editor
Cursor/For Editorcursor.com- D
Dither.it / For making images better
Dither.it/For making images betterditherit.com 
Flaticon / For image PNGs
Flaticon/For image PNGsflaticon.comLucide / For icons
Lucide/For iconslucide.devNext.js / For building web applications
Next.js/For building web applicationsnextjs.org
PostHog / For tracking
PostHog/For trackingposthog.comTailwind CSS / For styling
Tailwind CSS/For stylingtailwindcss.comTypeScript / For type safety
TypeScript/For type safetytypescriptlang.orgUnplash / For background images
Unplash/For background imagesunsplash.comVercel / For deploying
Vercel/For deployingvercel.com
Questions people actually ask.
Pricing forever free, design rules, clean code, and why the stage stays light — straight answers.
No. Components stay free under the MIT license — personal and commercial — for good. Not “free forever*” with a catch later. Sponsorships on the sponsor page are optional support so the project can keep shipping. They do not unlock components and they do not turn the library into a subscription product.
Yes. Every piece is copy-paste TypeScript you own after you paste it. Drop the same button, mockup, or widget into multiple React or Next.js apps, rename props, restyle with Tailwind — no vendor lock-in and no Opensource UI npm package to keep in sync.
Live previews, copy-ready source, and production-minded UI across categories: buttons, widgets, forms, social cards, loaders, tables, plus Apple-style device mockups (iPhone, MacBook, iPad, Watch, browser frames). Browse all components or jump to mockups.
Yes. Source is TypeScript-first, readable props, Tailwind utility classes in the file you paste — not a black-box package. Built for real apps: clear structure, MIT license, no mystery runtime. You can edit, delete, or restyle anything after it lands in your repo.
Quiet neutral stage, clear type, hairline borders. Accents only where state or demos need them. No purple-gradient dashboard chrome, no glow for its own sake. Motion respects reduced-motion. Responsive with base styles plus md: — not sm:. Focus is border change, not colored rings. Goal: UI that feels shipped, not demo-reel.
Craft Bench is intentionally light: paper white, ink text, quiet borders. That stage keeps demos readable and consistent across the catalog. Components you copy are yours — add dark variants in your app if you need them. The library itself stays on one clear visual language so previews do not fight each other.
Open anything under components, copy the TypeScript source, paste it into your React or Next.js app, and fix imports. You own the file after that — no Opensource UI package to install or update.
No. Opensource UI is its own open-source project — copy-paste UI with a separate design system and components. Official site is only opensourceui.in.