Buttons & Actions

Animated Theme Toggler

An animated light/dark toggle using the View Transitions API, with configurable clip-path shapes and origin. Drives the kit's ThemeProvider, so persistence and the data-theme attribute are handled for you.

Import

import { AnimatedThemeToggler } from "@countryclub/ui-react";

Default

Click to toggle the theme with a circular reveal.

Shapes

Pick the reveal shape with the variant prop: circle, square, triangle, diamond, hexagon, rectangle or star.

circle
square
triangle
diamond
hexagon
rectangle
star

From Center

Expand the reveal from the viewport center instead of the button with fromCenter.

Hexagon reveal expanding from the viewport center (600ms).