Search...
K

Knob Toggle

A knob toggle to switch between light and dark mode with sound effect

Documentation

pnpm dlx @t7blocks/cli add knob-toggle

Usage

import { KnobToggle } from "@/components/T7blocks/KnobToggle";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
          <KnobToggle />
        </div>
      </body>
    </html>
  );
}

Properties

PropertyTypeDefaultDescription
classNamestring""Additional CSS classes for the button
defaultCheckedbooleanfalseInitial checked state of the toggle
primaryColorstring"#0037ffff"The color of the toggle when checked
soundSrcstringundefinedURL to an audio file to play when toggled

Related resources

Dot Launch Button

Stagger Button