opensourceui
GitHubTwitter/X

Components / Docs

Gallery

9 components you can copy and paste into your React or Next.js project. Each includes setup steps, source code, and a live preview.

Components

9 ready to copy — open any card for full setup and source.

Roll 24 · Kodak Portra

Frame 101
Frame 202
Frame 303
Frame 404

Film Strip / Gallery

Horizontal 35mm strip with sprocket holes and multiple frames. Roll label up top — great for photo galleries and vintage layouts.

Free · copy & paste ready

Summer Collection

24 photos · Jun 2026

Summer Collection
Summer Collection
Summer Collection
+21

Gallery Grid / Gallery

Album preview with title, subtitle, and a three-cell photo grid — last cell shows a +N overflow count. Portfolio and gallery index pages.

Free · copy & paste ready

Scenic landscape
Bishnupur, West Bengal

Where the river meets the mangrove forest

JD
BK
AS
+12 saved

Glass Overlay Image / Gallery

Full-bleed photo with frosted bottom panel — location, title, saved avatars, and Explore CTA. Like and share buttons float top-right.

Free · copy & paste ready

Museum Placard / Gallery

Gallery exhibition label that flips to reveal curator notes and acquisition details. Art portfolios and culture sites love this interaction.

Free · copy & paste ready

KyotoOsakaHokkaidoTokyo

Kyoto

Mar 12

Photo Album / Gallery

Swipeable square photo carousel with place and date caption plus dot indicators. Swap in your own photos and tell a travel story.

Free · copy & paste ready

Contact sheet — Roll 12A

Frame 0101
Frame 0303
Frame 0404
Frame 0202

Photo Contact Sheet / Gallery

Film contact sheet with a 2×2 numbered frame grid and roll label header. Photographer portfolio vibes, straight from the darkroom.

Free · copy & paste ready

Polaroid photo

Golden hour, Kolkata ☀

June, 2026

Polaroid Image / Gallery

Classic white polaroid with photo, caption, and date — slight tilt that straightens on hover. Nostalgic without feeling like a filter preset.

Free · copy & paste ready

LIFESTYLE / 01 — slow living —

JAN 2026

Slow morning portrait

daily ritual

The beauty of a slow morning.

Fresh coffee, soft light, and a moment to just breathe before the day starts.

stay grounded

Slow Living Polaroid / Gallery

Dark editorial layout with a taped, tilted polaroid and lowercase lifestyle copy. Slow living, coffee brands, quiet product launches.

Free · copy & paste ready

Sundarbans, WB
INDIA₹5

Wish you were here! The Sundarbans at golden hour — absolutely unreal.

Posted from

Sundarbans, WB

Stamp Postcard / Gallery

Vintage postcard with landscape photo, postage stamp overlay, handwritten message, and posted-from address. Travel and lifestyle brands love this one.

Free · copy & paste ready

On this

page

Jump to a section on this page.

Sponsor spot · demo preview

Logo

Your brand name

Your tagline or category

A short pitch about your product or service goes here. This is a preview of how sponsor cards will look in this sidebar.

Your call to action

This slot is available. Sponsor Opensource UI and reach developers browsing components every day.

Menu

Getting started

  • Home
  • All components

Components

Activity7
  • Dnd Face
  • Focus Breath
  • Heart Rate
  • Hydration
  • Pomodoro
  • Sleep Score
  • Step Count
Audio7
  • Audio Recorder
  • Ios Earbuds
  • Music Player
  • Music Playlist
  • Now Playing Bar
  • Recorder Face
  • Voice Assistant
Battery1
  • Battery Face
Bluetooth1
  • Bluetooth Face
Buttons10
  • Add To Cart Button
  • Bookmark Save Button
  • Copy Button
  • Download Button
  • Follow Button
  • Hold To Delete Button
  • Like Button
  • Quantity Stepper Button
  • Segmented Toggle Button
  • Slide To Confirm Button
Calender7
  • Booking Slot Calendar
  • Daily Activity Calendar
  • Date Range Picker
  • Event Countdown Card
  • Ios Calender
  • Month Picker Calendar
  • Week Strip Calendar
Clocks4
  • Analog Clock — Minimal
  • Analog Clock — Numeric
  • Analog Clock — Roman
  • Ios Digital Clock
Compass1
  • Compass
Discord1
  • Discord Chat
Dropdowns7
  • File Menu
  • Filter Sort
  • Kebab Actions
  • Notification
  • Share Menu
  • User Menu
  • Workspace Switcher
Event1
  • Event Ticket
Facebook2
  • Facebook Post
  • Threads Post
Files1
  • Stacked Folder Card
Folder1
  • Opensource Folder Tab Card
Gallery9
  • Film Strip
  • Gallery Grid
  • Glass Overlay Image
  • Museum Placard
  • Photo Album
  • Photo Contact Sheet
  • Polaroid Image
  • Slow Living Polaroid
  • Stamp Postcard
Github2
  • Github Contribution
  • Github Repo
Instagram1
  • Instagram Post
Linkedin2
  • Linked In Post
  • Linked In Profile
Map-location1
  • Ios Map Location
Mockups3
  • Browser
  • Laptop
  • Phone
Notifications10
  • Apple Notification
  • Calendar Reminder Notification
  • Chat Bubble Notification
  • Delivery Notification
  • Deploy Notification
  • Email Notification
  • Incoming Call Notification
  • Payment Notification
  • System Alert
  • Toast Notification
Others4
  • Progress Ring
  • Stacked Cards Effect
  • Terminal Log
  • Thermal Receipt
Pricing2
  • Retail Price Tag
  • Toggle Pricing Cards
Profile1
  • Blob Profile
Resources1
  • Resource Links Panel
Stopwatch1
  • Stopwatch
Table6
  • Customers Table
  • Orders Table
  • Recent Transactions Table
  • Tasks Table
  • Team Members Table
  • Users Select Table
Text9
  • Cinema Ticket
  • Daily Motivation
  • Denim Product Editorial
  • Drop Cap Editorial
  • Editorial Quote
  • Journal Writing
  • Keyboard Shortcuts
  • Magazine Cover
  • Notepad
Torch1
  • Torch Face
Travel6
  • Electric Scooter
  • Flight Arrival
  • Flight Boarding
  • Minimal Agenda
  • Ride Pickup
  • Travel Postcard
Twitter2
  • Twitter Post
  • Twitter Profile
Underlines1
  • Annotated Text
Users3
  • Credit Card Glass
  • Team Member
  • Testimonial
Wallet1
  • Wallet Pass
Wifi1
  • Wifi Toggle

Ready when you are.

Free for personal and commercial use. No UI attribution required. MIT License. Made & maintained by Bidyut Kundu.

© 2026 Opensource UI · Made in India