Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React 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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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