OpenSourceUIOpenSourceUIOpensource UI
GitHubTwitter/X
Components / Docs

Calender

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

Components

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

Book a slot

30 min · Google Meet video call

August 2026

Saturday, Aug 22

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

August 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

101

days

04

hrs

54

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

August 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

August 2026

Aug 16 – Aug 22

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

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