Shadcn.io is not affiliated with official shadcn/ui
Zoom Controls
Zoom control button group with increase/decrease and reset functionality for image and document scaling
Visual content demands scale control—zoom buttons enable flexible viewing. This React component combines shadcn/ui's Button and ButtonGroup components with Lucide React's ZoomInIcon, ZoomOutIcon, RotateCcwIcon, and MaximizeIcon for zoom controls with percentage-based scaling and boundary enforcement using Math.max/Math.min. Built on Radix UI with discrete 25% increments and explicit reset/fit actions, the pattern delivers zoom controls with clear magnitude indication. Perfect for image viewers like Figma or Photoshop adjusting canvas scale, PDF readers like Adobe Acrobat controlling document zoom, map applications like Google Maps managing map detail, or any visual interface where content scale should be adjustable—button groups unify zoom actions, percentage display shows current scale, reset/fit buttons provide quick returns to defaults. The dual approach shown (full controls with reset/fit vs minimal with percentage display) demonstrates how zoom interfaces adapt to different toolbar densities, with comprehensive controls serving feature-rich applications while minimal variants work in space-constrained mobile interfaces or floating toolbars overlaying content.
Zoom Controls preview
Installation
Related Components
Volume Controls
Audio level adjustment buttons
Player Controls
Media playback buttons
Quantity Picker
Increment/decrement controls
Slider Component
Range input alternative
Outline Button
Border-style button variant
Basic Button Group
Simple grouped buttons
FAQ
Was this page helpful?
Sign in to leave feedback.