ThemeSwitcher

The theme control - a chip in the live palette opens a grid of miniatures, one per palette and side. Persists the choice, follows the OS, no flash on load.

The chip in the header is this component. Both read and write the site's own theme, so a pick here turns the whole page and stays open to compare; arrow keys walk the grid, Enter or Escape closes it. The transition knobs set the site's ZyncatTheme, so every theme change runs the chosen effect until the page reloads.

Install ThemeSwitcher

1. New project? One command installs the package and wires everything - see Installation:

bash
pnpm dlx zyncat-ui init

2. Import the component - it loads its own stylesheet:

tsx
import { ThemeSwitcher } from '@zyncat/ui/theme-switcher';

Usage

tsx
import { ThemeSwitcher } from '@zyncat/ui/theme-switcher';
 
<ThemeSwitcher labels={{ default: 'Zyncat', ember: 'Ember', iris: 'Iris' }} align="end" />

Compose ThemeSwitcher in your application. No Tailwind or external styling library is required; every value resolves from Zyncat UI's token vocabulary.

ThemeSwitcher props

ThemeSwitcher

PropTypeDefaultDescription
labelsThemeGridProps['labels']—Overrides the palette's own `name`, keyed like `themes`. For names that come from a translation.
labelstring'Theme'Accessible name of the control and its grid.
side'top' | 'bottom' | 'left' | 'right''bottom'Preferred side of the panel; flips to the opposite side when cramped.
align'start' | 'center' | 'end''end'Cross-axis alignment of the panel against the chip.
animationDisableableAnimationopen 'base'/'entrance', close 'fast'/'exit'Open/close timing - motion tokens only, or `null` to disable.
classNamestring—Extra class(es) merged onto the chip.
styleCSSProperties—Inline styles merged onto the chip.
...htmlAttributesButtonProps['htmlProps']—Standard <button> attributes (aria-*, data-*, ...) forwarded to the chip.
Set in Geist & Newsreader — animated by the house engineZyncat UI · Rev 0.11 · MIT · Built by Tabsir Ahammed · Source on GitHub