opensourceui
GitHubTwitter/X

Components / Docs

Compass

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

Components

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

NESW

Compass / Compass

A compass dial with labeled directions and a needle that follows device tilt. Pass a heading prop or let the browser handle orientation.

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