Theme Toggler Button Demo

PreviousNext

Demo showing a theme toggler button.

Docs
animate-uiui

Preview

Loading preview…
registry/demo/components/buttons/theme-toggler/index.tsx
import {
  ThemeTogglerButton,
  type ThemeTogglerButtonProps,
} from '@/components/animate-ui/components/buttons/theme-toggler';

interface ThemeTogglerButtonDemoProps {
  variant: ThemeTogglerButtonProps['variant'];
  size: ThemeTogglerButtonProps['size'];
  direction: ThemeTogglerButtonProps['direction'];
  system: boolean;
}

export default function ThemeTogglerButtonDemo({
  variant,
  size,
  direction,
  system,
}: ThemeTogglerButtonDemoProps) {
  return (
    <ThemeTogglerButton
      variant={variant}
      size={size}
      direction={direction}
      modes={system ? ['light', 'dark', 'system'] : ['light', 'dark']}
    />
  );
}

Installation

npx shadcn@latest add @animate-ui/demo-components-buttons-theme-toggler

Usage

import { DemoComponentsButtonsThemeToggler } from "@/components/ui/demo-components-buttons-theme-toggler"
<DemoComponentsButtonsThemeToggler />