opensourceui
GitHubTwitter/X

Components / Docs

Calender

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

Components

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

Book a slot

Saturday, Jul 11

Booking Slot Calendar / Calender

Appointment booking flow — week strip on top, time slots below. Unavailable slots are crossed out, tap to book.

Free · copy & paste ready

Daily Activity

NovAugust 2024
SMTWTFS
12345678910111213141516171819202122232425262728293031

Daily Activity Calendar / Calender

Month grid with a highlighted day — like a lightweight activity calendar without the GitHub heatmap complexity. Good for habit trackers and dashboards.

Free · copy & paste ready

July 2026

Select a date range

SMTWTFS

Date Range Picker / Calender

Travel-style date range picker — first tap sets check-in, second sets check-out, days between fill in.

Free · copy & paste ready

Countdown

Product launch

Tuesday, December 1

142

days

10

hrs

10

min

Event Countdown Card / Calender

Live countdown to an event — days, hours, and minutes update every minute. Editorial typography, no ticker gimmicks.

Free · copy & paste ready

Ios Calender / Calender

Today's date in the classic iOS calendar tile — red weekday, big day number, month underneath. Updates live, no refresh needed.

Free · copy & paste ready

July 2026

SMTWTFS

Month Picker Calendar / Calender

Full month picker with prev/next navigation — tap any day to select it, today gets a quiet ring.

Free · copy & paste ready

Jul 5 – Jul 11

Week Strip Calendar / Calender

Horizontal week strip for booking and scheduling apps — arrow through weeks, tap a day to select.

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