Radix Toggle Demo

PreviousNext

Demo showing an animated radix toggle.

Docs
animate-uiui

Preview

Loading preview…
registry/demo/primitives/radix/toggle/index.tsx
import {
  Toggle,
  ToggleHighlight,
  ToggleItem,
} from '@/components/animate-ui/primitives/radix/toggle';
import { Bold } from 'lucide-react';

export const RadixToggleDemo = () => {
  return (
    <Toggle className="relative size-8 flex items-center justify-center">
      <ToggleHighlight className="bg-accent" />
      <ToggleItem>
        <Bold className="h-4 w-4" />
      </ToggleItem>
    </Toggle>
  );
};

Installation

npx shadcn@latest add @animate-ui/demo-primitives-radix-toggle

Usage

import { DemoPrimitivesRadixToggle } from "@/components/ui/demo-primitives-radix-toggle"
<DemoPrimitivesRadixToggle />