OpenSourceUIOpenSourceUIOpensource UI
GitHubTwitter/X
Components / Docs

Audio

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

Components

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

Midnight Dreams

Midnight Dreams

The Weekend · After Hours

1:243:42

Music Player / Audio

Full dark player card with cover art, album info, progress scrubber with times, and transport controls. Not a bar — the whole now-playing screen.

Free · copy & paste ready

Chill Vibes

Playlist

Chill Vibes

24 songs · 1h 32m

Music Playlist / Audio

Playlist card with cover, header stats, and a track list where each row toggles play independently. One component, full playlist UI.

Free · copy & paste ready

Midnight Dreams

Midnight Dreams

The Weekend

Now Playing Bar / Audio

Compact dark player bar with artwork, track info, transport controls, and a scrubber. The footer bar every music app eventually needs.

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

Audio3
  • Music Player
  • Music Playlist
  • Now Playing Bar
Buttons16
  • 3D Button
  • 3D Icon Button
  • Add To Cart Button
  • Bookmark Save Button
  • Copy Button
  • Depth Outline Button
  • Download Button
  • Follow Button
  • Hold To Delete Button
  • Inset Button
  • Like Button
  • Quantity Stepper Button
  • Segmented Toggle Button
  • Slide To Confirm Button
  • Soft Pill Button
  • Soft UI Button
Calender5
  • Booking Slot Calendar
  • Date Range Picker
  • Event Countdown Card
  • Month Picker Calendar
  • Week Strip Calendar
Docks5
  • App Dock
  • Editor Tool Dock
  • Mac Dock
  • Presence Dock
  • Spotlight Bar
Dropdowns7
  • File Menu
  • Filter Sort
  • Kebab Actions
  • Notification
  • Share Menu
  • User Menu
  • Workspace Switcher
Event1
  • Event Ticket
Files1
  • Stacked Folder Card
Folder1
  • Opensource Folder Tab Card
Forms5
  • Contact Form
  • Forgot Password Form
  • Login Form
  • Newsletter Form
  • Signup Form
Gallery9
  • Film Strip
  • Gallery Grid
  • Glass Overlay Image
  • Museum Placard
  • Photo Album
  • Photo Contact Sheet
  • Polaroid Image
  • Slow Living Polaroid
  • Stamp Postcard
Inputs14
  • Checkbox Field Input
  • Combobox Field Input
  • Date Field Input
  • File Upload Field Input
  • Floating Label Field Input
  • Input Group Field
  • Password Field Input
  • Phone Field Input
  • Radio Group Field Input
  • Search Input
  • Select Field Input
  • Switch Field Input
  • Text Field Input
  • Textarea Field Input
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
Otp2
  • Otp Boxed Input
  • Otp Underline Input
Pricing2
  • Retail Price Tag
  • Toggle Pricing Cards
Profile4
  • Contact Profile
  • Editorial Staff Profile
  • Team Member Profile Grid
  • User Profile
Resources1
  • Resource Links Panel
Socials10
  • Discord Chat
  • Facebook Post
  • Github Contribution
  • Github Repo
  • Instagram Post
  • Linked In Post
  • Linked In Profile
  • Threads Post
  • Twitter Post
  • Twitter Profile
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
Travel2
  • Flight Boarding
  • Travel Postcard
Underlines1
  • Annotated Text
Users3
  • Credit Card Glass
  • Team Member
  • Testimonial
Wallet1
  • Wallet Pass
Widgets29
  • Analog Clock — Minimal
  • Analog Clock — Numeric
  • Analog Clock — Roman
  • Audio Recorder
  • Battery Face
  • Blob Profile
  • Bluetooth Face
  • Compass
  • Daily Activity Calendar
  • Dnd Face
  • Electric Scooter
  • Flight Arrival
  • Focus Breath
  • Heart Rate
  • Hydration
  • Ios Calender
  • Ios Digital Clock
  • Ios Earbuds
  • Ios Map Location
  • Minimal Agenda
  • Pomodoro
  • Recorder Face
  • Ride Pickup
  • Sleep Score
  • Step Count
  • Stopwatch
  • Torch Face
  • Voice Assistant
  • 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