animui

Rise

The next appearance rises into place.

npm install https://animui.stracture.net/__local/package.tgz
Try the transition
  • Product chrome and dashboards where the theme change should be calm.
  • Icon-only toggles in a top bar, as the library's own header uses it.
  • Use theme-switch-eclipse for a dramatic change on a showcase page.
  • Use user-menu when theme belongs with account settings.

Installation

Install animui once, then import any component or block from its typed package entry.

animui · 250 components and blocks

React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.

npm install https://animui.stracture.net/__local/package.tgz

Load the stylesheet once at your app root, then use the typed component import:

import 'animui/styles.css';
import { ThemeSwitch } from 'animui/theme-switch-rise';

Read the Code tab for the implementation files and the API reference below for required props.

Download animui 0.3.0 · Agent guide
example.tsx
import { ThemeSwitch } from "animui/theme-switch"; <ThemeSwitch  theme={theme}  variant="rise"  iconOnly  onThemeChange={(next, variant, trigger) => runThemeTransition(next, variant, trigger)}/>

Examples

3 more in theme. Each has its own page with install and API details.

Theme switcher

Four smooth ways to move between light and dark appearance.

Open page

Eclipse

The next appearance crosses the page like an eclipse.

Open page

Split

The next appearance opens from a slim center seam.

Open page

ThemeSwitch

A secondary Button that swaps a sun and moon icon and reports the next theme. The page transition itself is yours to run.

PropTypeDefaultDescription
themeRequired"light" | "dark"–The current theme. Drives the icon and aria-pressed.
onThemeChangeRequired(next: Theme, variant: ThemeSwitchVariant, trigger: HTMLElement) => void–Called on press with the opposite theme, the variant, and the button, so the page transition can start from it.
variant"reveal" | "eclipse" | "split" | "rise""reveal"Names the page transition and sets the small icon nudge that matches it.
labelstring–Accessible name. Defaults to "Switch to dark mode" or "Switch to light mode".
iconOnlybooleanfalseHides the "Switch theme" text and renders a 38px square button.
EnterorSpace
Toggles the theme.
  • Same button as theme-switch: aria-pressed reflects dark mode and the label names the next theme.
  • Keep the rise off for reduced motion and swap the theme directly.
  • variant="rise": the next appearance rises into place from the bottom; run it in onThemeChange with a view transition.
  • The icon lifts 2px in dark mode.
  • Reduced motion removes the nudge and swaps the icon with a fade.
  • The labelled button fits a desktop top bar; pass iconOnly for a fixed 38px square on narrow headers and mobile.
  • Hover styles apply only on hover-capable fine pointers, so touch taps do not leave a stuck hover state.
  • The button itself is tiny: one icon swap on a spring, and the first theme after hydration applies without animating.
  • The page transition is yours; a full-page view transition snapshots the whole document, so keep it short and skip it for reduced motion.

Notes for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Select with variant="rise". The prop only styles the icon nudge and is passed back to onThemeChange; the page animation is your code.
  • The calmest of the four; the library's own top bar uses it with iconOnly.
/components/theme-switch-rise/markdown

The full library index for assistants is at /llms.txt.

Theme switcherComponentFour smooth ways to move between light and dark appearance.EclipseComponentThe next appearance crosses the page like an eclipse.SplitComponentThe next appearance opens from a slim center seam.