Animated theme transitions for the web, powered by the View Transitions API. A framework-agnostic core with a thin adapter per framework.
- ✅ Multiple effects to choose from
- ✅ Zero flash of the wrong theme on load
- ✅ Syncs automatically with OS
prefers-color-scheme - ✅ Custom themes beyond light/dark
- ✅ Vue, React, Nuxt, Next.js, and Alpine.js adapters, all built on the same framework-agnostic core
Check out the Live Example to try it for yourself, or report a bug.
Note
This is the source monorepo, for contributing to the packages themselves. If you just want to use one of them in your own project, jump straight to its README via the table below and npm install it normally. Don't clone this repo or copy a demo app out of it.
| Package | npm | Description |
|---|---|---|
@brustack/theme-transitions-core |
 |
Framework-agnostic core: theme detection/persistence, View Transition orchestration, effect CSS generation. |
@brustack/vue-theme-transitions |
 |
Vue composable built on the core. |
@brustack/react-theme-transitions |
 |
React hook built on the core. |
@brustack/nuxt-theme-transitions |
 |
Nuxt module built on the core. |
@brustack/next-theme-transitions |
 |
Next.js App Router hook and anti-flash script component built on the core. |
@brustack/alpine-theme-transitions |
 |
Alpine.js plugin built on the core, with a self-registering CDN build. |
This section is for working on the packages themselves, not for using them. Run every command from the repo root. The demo apps (apps/react-demo, apps/vue-demo, apps/next-demo, apps/nuxt-demo, apps/alpine-demo, apps/showcase) are npm workspaces symlinked to the local, in-progress source, not the published npm packages, so they only run correctly from inside this repo. They aren't standalone starter templates you can copy elsewhere.
Try a demo:
npm install
npm run dev:vue-demo
npm run dev:react-demo
npm run dev:next-demo
npm run dev:nuxt-demo
npm run dev:alpine-demo
npm run dev:showcase
Only want one demo? npm run install:<name> (e.g. npm run install:react-demo) installs just that demo's dependencies instead of the whole monorepo.
Everything else:
| Command | Description |
|---|---|
npm test |
Run the test suite |
npm run lint |
Lint all packages |
npm run typecheck |
Type-check all packages |
npm run build |
Build all packages |
Copyright (c) 2026 Bruno Neckel