css-theme-transitionCSS-THEME-TRANSITION
No Provider · No Wrapper · Just Drop In

Theme transitions
that actually look good

Smooth View Transition API animations for React & Next.js dark/light mode. 16 built-in variants, built-in theme engine, zero dependencies. Click the sun/moon icon in the navbar to see it live.

Browse ComponentsSee Examples
npm install css-theme-transition
0Variants
0Dependencies
~0kbBundle size

Get started in seconds

Install, import, done. No provider, no wrapping, no config.

npm install css-theme-transition
header.tsx / style.css
import ThemeTransition from "css-theme-transition"
import "css-theme-transition/theme-transition.css" // optional

// Tailwind-only layout using the same CSS variables
export default function Header() {
  return (
    <header>
      <div className="h-screen w-screen flex justify-center items-center bg-[var(--bg)] text-[var(--text)]">
        <div className="h-[50px] w-[50px] flex justify-center items-center">
          <ThemeTransition
            variant="circle-pivot"
            position="top-left"
            className="theme"
          />
        </div>
      </div>
    </header>
  )
}

All Components

Click any card to activate the toggle, then click the icon to preview the transition live. Copy the snippet or install via your package manager.

01

Circle

Simple circular reveal from the center of the screen.

<ThemeTransition variant="circle" />
02

Circle [Blur]

Blurred circular reveal that expands outwards.

<ThemeTransition variant="circle-blur" />
03

Circle Pivot [Top Right]

Circle pivot animation expanding from the top right corner.

<ThemeTransition variant="circle-pivot" position="top-right" />
04

Circle Pivot [Top Left]

Circle pivot animation expanding from the top left corner.

<ThemeTransition variant="circle-pivot" position="top-left" />
05

Circle Pivot [Bottom Right]

Circle pivot animation expanding from the bottom right corner.

<ThemeTransition variant="circle-pivot" position="bottom-right" />
06

Circle Pivot [Bottom Left]

Circle pivot animation expanding from the bottom left corner.

<ThemeTransition variant="circle-pivot" position="bottom-left" />
07

Circle Pivot [Top Center]

Circle pivot animation expanding from the top center.

<ThemeTransition variant="circle-pivot" position="top-center" />
08

Circle Pivot [Bottom Center]

Circle pivot animation expanding from the bottom center.

<ThemeTransition variant="circle-pivot" position="bottom-center" />
09

Star

Star-shaped reveal animation from the center.

<ThemeTransition variant="star" />
10

Star [Blur]

Blurred star reveal for a softer transition.

<ThemeTransition variant="star-blur" />
11

Diamond

Diamond-shaped reveal animation from the center.

<ThemeTransition variant="diamond" />
12

Diamond [Blur]

Blurred diamond reveal for a smooth transition.

<ThemeTransition variant="diamond-blur" />
13

Triangle

Triangle-shaped reveal animation from the center.

<ThemeTransition variant="triangle" />
14

Triangle [Blur]

Blurred triangle reveal for a softer effect.

<ThemeTransition variant="triangle-blur" />
15

Hexagon

Hexagon-shaped reveal animation from the center.

<ThemeTransition variant="hexagon" />
16

Hexagon [Blur]

Blurred hexagon reveal for a smooth transition.

<ThemeTransition variant="hexagon-blur" />
Showcase

Navbar Examples

5 real-world navbar patterns each using a different ThemeTransition variant. Click “Copy code” to grab the full responsive snippet.

Minimal Clean

circle-pivot / top-right

Clean, modern navbar with circle-pivot expanding from the top-right corner.

navbar.tsx
import ThemeTransition from "css-theme-transition"

export function Navbar() {
  return (
    <nav className="flex items-center justify-between h-14 px-6 border-b">
      <span className="font-semibold">Acme</span>
      <div className="flex items-center gap-2">
        <a href="#">Docs</a>
        <ThemeTransition variant="circle-pivot" position="top-right" />
      </div>
    </nav>
  )
}

Glassmorphism

star

Frosted glass pill navbar with a star-shaped View Transition reveal.

navbar.tsx
import ThemeTransition from "css-theme-transition"

export function Navbar() {
  return (
    <nav className="backdrop-blur-md bg-white/60 border border-white/80 rounded-xl flex items-center h-12 px-5">
      <span className="flex-1 font-semibold">NexUI</span>
      <ThemeTransition variant="star" />
    </nav>
  )
}

Dashboard

diamond

Dashboard layout with pill-tab navigation and diamond transition.

navbar.tsx
import ThemeTransition from "css-theme-transition"

export function Navbar() {
  return (
    <nav className="flex items-center h-14 px-6 border-b gap-4">
      <span className="font-bold w-40">Dataflow</span>
      <div className="flex-1 flex justify-center">
        {/* pill tab nav */}
      </div>
      <ThemeTransition variant="diamond" />
    </nav>
  )
}

Bold Editorial

hexagon

Dark background editorial style with hexagon reveal animation.

navbar.tsx
import ThemeTransition from "css-theme-transition"

export function Navbar() {
  return (
    <nav className="flex items-center h-14 px-6 bg-black">
      <span className="flex-1 font-black text-white uppercase tracking-widest">
        Forma
      </span>
      <ThemeTransition variant="hexagon" />
    </nav>
  )
}

Floating Pill

circle-blur

Centered floating pill navbar with smooth circle-blur transition.

navbar.tsx
import ThemeTransition from "css-theme-transition"

export function Navbar() {
  return (
    <div className="flex justify-center py-3">
      <nav className="flex items-center h-11 px-2 rounded-2xl border bg-white shadow-md">
        <span className="px-3 font-bold text-xs">Luminary</span>
        <a href="#" className="px-3 py-1.5 text-xs rounded-xl bg-black text-white">Features</a>
        <ThemeTransition variant="circle-blur" />
      </nav>
    </div>
  )
}