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...
"use client"
import { Switch } from "@/components/ui/heroui-switch"
export default function RenderProps() {
return (
<Switch>
{({ isSelected }) => (
<Switch.Content>
<Switch.Control>
<Switch.Thumb />
</Switch.Control>
{isSelected ? "Enabled" : "Disabled"}
</Switch.Content>
)}
</Switch>
)
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...