Components
Loading preview...
A collection of customizable toggle switch components built with React and Tailwind CSS. Features - Minimal and Orange toggle variants - Dark mode support - Smooth transitions and animations - Fully accessible with keyboard navigation - TypeScript support with proper types - Follows shadcn/ui component patterns Variants Minimal Toggle A simple toggle switch with green accent colors and dark mode support. Features a sliding circle indicator and smooth transitions. Orange Toggle A more elaborate toggle with orange accent colors and hover effects. Includes a floating animation and custom border styling.
npx shadcn@latest add https://21st.dev/r/Edil-ozi/toggle"use client"
import { MinimalToggle, OrangeToggle } from "@/components/ui/toggle"
function MinimalToggleDemo() {
return (
<div className="flex flex-col items-center gap-4 p-1 text-center xl:gap-8">
<MinimalToggle tabIndex={0} />
<span>Toggle-minimal</span>
</div>
)
}
function OrangeToggleDemo() {
return (
<div className="flex flex-col items-center gap-4 p-1 text-center xl:gap-8">
<OrangeToggle />
<span>Toggle-orange</span>
</div>
)
}
export { MinimalToggleDemo, OrangeToggleDemo }