Command Palette

Search for a command to run...

Loading component...

Components free Theme toggle btn

Theme toggle btn

Advanced theme toggle component with View Transition API animations. Features multiple animation variants including circle, circle-blur, bottom-up, and GIF-based transitions.

Dependencies

framer-motionnext-themeslucide-react

Interaction Type

Toggle theme with animated transitions
Drag options panel to reposition
Change animation variants and GIFs

with shacn cli3.0

//components.json
  "registries": {
    "@skiper-ui": "https://skiper-ui.com//registry/{name}.json"
  }
npx shadcn add @skiper-ui/skiper26

OR with old shacncli

 npx shadcn@latest add https://skiper-ui.com/registry/skiper26.json

Manual setup

pnpm install next-themes

create theme provider

// components/theme-provider.tsx

"use client";

import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";

export function ThemeProvider({
  children,
  ...props
}: React.ComponentProps<typeof NextThemesProvider>) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

Wrap your app with the theme provider

// app/layout.tsx

import { ThemeProvider } from "@/components/theme-provider";

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <>
      <html lang="en" suppressHydrationWarning>
        <head />
        <body>
          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
            {children}
          </ThemeProvider>
        </body>
      </html>
    </>
  );
}

Use the skiper theme toggle

// Using just the theme toggle button
const SimpleToggle = () => {
  return (
    <div className="flex items-center justify-center p-8">
      <ThemeToggleButton variant="circle" start="center" />
    </div>
  );
};

// Using the custom hook for advanced control
const CustomToggle = () => {
  const { isDark, toggleTheme } = useThemeToggle({
    variant: "rectangle",
    start: "bottom-up",
  });

  return (
    <button
      onClick={toggleTheme}
      className="rounded bg-blue-500 px-4 py-2 text-white"
    >
      Toggle Theme
    </button>
  );
};

// Dark or Light mode only
const CustomToggle2 = () => {
  const { setCrazyDarkTheme, setCrazyLightTheme , isDark } = useThemeToggle({
    variant: "rectangle",
    start: "bottom-up",
  });

  return (
    <div className="flex gap-2">
    {
      isDark?(
        <button
        onClick={setCrazyDarkTheme}
        className="rounded bg-blue-500 px-4 py-2 text-white"
      >
        Dark Mode
      </button>
      ):(
        <button
        onClick={setCrazyLightTheme}
        className="rounded bg-blue-500 px-4 py-2 text-white"
      >
        Light Mode
      </button>
      )
    </div>
    }
  );
};
Props
Description

variant

circle, circle-blur, rectangle, gif, polygon,

blur

background blur while transition

start

top-left, top-right, bottom-left, bottom-right, center

gifUrl

Custom GIF URL for gif variant

GIF Animation

<ThemeToggleButton
  variant="gif"
  gifUrl="https://media.giphy.com/media/your-gif.gif"
/>

Customize the gif url

You can find some awesome gifs at giphy and use them in your project. remember use the high contrast gif.

Attribution

Source code

Click on the top right
to view the source code

Keep in mind

Most components here are recreations of the best out there. I don't claim to be the original creator. This is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone, but if I missed something, let me know.

Contact

Additionlly, if you find any bug or issue, feel free to
Drop a dm.

License & Usage:

  • Free to use and modify in both personal and commercial projects.
  • Attribution to Skiper UI is required when using the free version.
  • No attribution required with Skiper UI Pro.
PreviousNext