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, SwitchGroup } from "@/components/ui/heroui-switch"
export default function Group() {
return (
<SwitchGroup>
<Switch name="notifications">
<Switch.Content>
<Switch.Control>
<Switch.Thumb />
</Switch.Control>
Allow Notifications
</Switch.Content>
</Switch>
<Switch name="marketing">
<Switch.Content>
<Switch.Control>
<Switch.Thumb />
</Switch.Control>
Marketing emails
</Switch.Content>
</Switch>
<Switch name="social">
<Switch.Content>
<Switch.Control>
<Switch.Thumb />
</Switch.Control>
Social media updates
</Switch.Content>
</Switch>
</SwitchGroup>
)
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...