Components
HeroUI v3 Switch — toggle with sizes, label position, icons, descriptions, disabled/selected states, groups, render props and custom styles.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-switchLoading preview...
import { Switch } from "@/components/ui/heroui-switch"
export default function Sizes() {
return (
<div className="flex gap-6">
<Switch size="sm">
<Switch.Content>
<Switch.Control>
<Switch.Thumb />
</Switch.Control>
Small
</Switch.Content>
</Switch>
<Switch size="md">
<Switch.Content>
<Switch.Control>
<Switch.Thumb />
</Switch.Control>
Medium
</Switch.Content>
</Switch>
<Switch size="lg">
<Switch.Content>
<Switch.Control>
<Switch.Thumb />
</Switch.Control>
Large
</Switch.Content>
</Switch>
</div>
)
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...