Shadcn.io is not affiliated with official shadcn/ui
Map Controls
Map view mode selector button group for switching between satellite, road, terrain, and hybrid map layers
Maps reveal different information through different layers—view controls empower spatial exploration. This React component combines shadcn/ui's Button and ButtonGroup components with Lucide React's MapIcon and Navigation2Icon for map layer selection with stateful variant toggling. Built on Radix UI with variant switching between default (active) and outline (inactive) states using size="sm" for compact map overlay controls, the pattern delivers map view mode switchers with clear selection indication. Perfect for mapping applications like Google Maps or Mapbox offering layer switching, real estate platforms showing property locations with different map contexts, logistics dashboards displaying route planning with terrain awareness, or any location interface where map visualization should adapt to user needs—button groups unify layer options, variant switching communicates active view, text labels clarify map modes.
Map Controls preview
Installation
Related Components
Chart Controls
Data visualization switchers
Timeline Controls
Time period selectors
Toggle Group
Segmented toggle controls
Outline Button
Border-style button variant
Basic Button Group
Simple grouped buttons
Select Component
Dropdown selection
FAQ
Was this page helpful?
Sign in to leave feedback.