Shadcn.io is not affiliated with official shadcn/ui
Small Switch
Compact switch toggle with h-4 w-7 sizing for dense layouts space-constrained interfaces and desktop-only applications built with shadcn/ui
Real estate matters—sometimes every pixel counts. This React switch shrinks to h-4 w-7 using Tailwind size utilities with shadcn/ui Switch component for compact binary controls. Built with Radix UI primitives and 16px by 28px dimensions, the small switch fits dense layouts where standard 24px height feels too large—perfect for data tables, toolbars, crowded dashboards, desktop applications, or any interface where vertical space is premium and mobile touch targets aren't priority.
Small Switch preview
Installation
Related Components
Default Switch
Standard 24px height switch
Checked Switch
Switch with defaultChecked prop
Disabled Switch
Non-interactive disabled state
Square Theme Toggle
Compact h-5 square switch variant
Checkbox
Alternative compact binary control
Icon Button
Compact button for toolbars
FAQ
Was this page helpful?
Sign in to leave feedback.