Components
Loading preview...
Here is Toggle component
npx shadcn@latest add https://21st.dev/r/anubra266/toggle-basic"use client";
import { Toggle } from "@ark-ui/react/toggle";
import { Volume, VolumeX } from "lucide-react";
import { useState } from "react";
export default function ToggleControlled() {
const [pressed, setPressed] = useState(false);
return (
<div className="bg-white dark:bg-gray-800 w-full px-4 py-12 rounded-xl flex flex-col items-center space-y-4">
<Toggle.Root
pressed={pressed}
onPressedChange={setPressed}
className="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 data-[state=on]:bg-red-100 dark:data-[state=on]:bg-red-900/30 data-[state=on]:text-red-700 dark:data-[state=on]:text-red-300 data-[state=on]:border-red-300 dark:data-[state=on]:border-red-600 transition-all text-sm font-medium"
>
{pressed ? (
<VolumeX className="w-4 h-4" />
) : (
<Volume className="w-4 h-4" />
)}
{pressed ? "Muted" : "Unmuted"}
</Toggle.Root>
<div className="text-center">
<p className="text-sm text-gray-600 dark:text-gray-400">
Volume is{" "}
<span className="font-medium">{pressed ? "muted" : "unmuted"}</span>
</p>
<button
onClick={() => setPressed(!pressed)}
className="mt-2 px-3 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
>
Toggle Externally
</button>
</div>
</div>
);
}