Theme Toggler

Animated theme toggle using the View Transitions API with configurable clip-path shapes and origin.

Installation

# CLI example

# Manual installation

Usage

Use variant to change the clip-path shape of the view transition (circle, square, triangle, diamond, rectangle, hexagon, or star):

// Usage example

Expand from the viewport center instead of the button with fromCenter:

// Usage example

Examples

The preview at the top of this page uses the default circle reveal. Below, each variant has its own isolated preview so you can test one shape at a time.

Square

// Preview code

Diamond

// Preview code

Rectangle

// Preview code

Hexagon

// Preview code

Triangle

// Preview code

Star

// Preview code

Props

Prop Type Default Description
className string — Additional classes for the button
duration number 400 Duration of the theme transition animation in milliseconds
variant TransitionVariant "circle" Shape used for the view-transition clip-path reveal
fromCenter boolean false If true, the clip expands from the viewport center instead of the button

Export TransitionVariant from the same module when you need typed props or menus.

Credits