Switch | Community Components - 21st | 21st

/Switch /

Switch

Here is Switch component

Install

npx shadcn@latest add https://21st.dev/r/ShadcnStudio/switch-1

Loading preview...

import { Switch } from '@/components/ui/switch'

const SwitchMiniDemo = () => {
  return (
    <Switch
      aria-label='Mini switch'
      className='[&_span]:border-input h-3 border-none [&_span]:size-4.5 [&_span]:border'
    />
  )
}

export default SwitchMiniDemo

More examples

DefaultOpen page →

Loading preview...

Switch OneOpen page →

Loading preview...

Switch FourOpen page →

Loading preview...

Switch FiveOpen page →

Loading preview...

Switch SevenOpen page →

Loading preview...

Switch EightOpen page →

Loading preview...

Switch NineOpen page →

Loading preview...

Switch TenOpen page →

Loading preview...

Switch ElevenOpen page →

Loading preview...

Switch TwelveOpen page →

Loading preview...

Switch ThirteenOpen page →

Loading preview...

Switch FiftheenOpen page →

Loading preview...

Switch SixteenOpen page →

Loading preview...

Switch SeventeenOpen page →

Loading preview...

Switch EighteenOpen page →

Loading preview...

Published

10/16/2025

Install

Dependencies

Tags

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Install

Dependencies

Tags

Install

Dependencies

Tags

Install

Dependencies

Tags

Switch

Install

More examples

Published

Similar components