Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Eclipse Toggle, animated React component

A light and dark switch played as an evening going by, that can change the whole page with it. The switch is a strip of sky over low hills, and the knob is the sun. Switch to dark and the sun sinks towards the hills: the light turns golden, the sun grows larger and goes orange and then red as it nears the horizon, and it sets behind the hills while a silver moon rises in its place. A rosy afterglow lingers, the evening star comes out first and then the stars, and the hills turn to silhouettes in the moonlight. Switch back and it plays as a sunrise, and a few birds fly off singing. Tap it, use Space, Enter or the arrow keys, or drag the knob to scrub the evening by hand. Turn on pageTransition and the page changes with it: dusk spreads out of the switch across the page as the stars come out, and switching back floods it with sunlight.

  • Pro
  • Inputs & Controls
  • Spring

A low swell as the light drains away and a soft bell as the sun sets; at sunrise a bright ting, a rising arpeggio and two birds answering each other. Sound is off on this site until you switch it on.

Play with it

This one is wired to the page: flip it and the whole site goes dark at sunset, or light at sunrise.

Props

PropTypeDefaultWhat it does
theme"light" | "dark"—The theme, when you control it. Leave it out to let the switch keep its own.
defaultTheme"light" | "dark""light"The starting theme when the switch keeps its own.
onThemeChange(theme: "light" | "dark", detail: { fromUser: boolean }) => void—Called with the new theme. Apply it to your page here. fromUser is false while autoplay runs, so you can leave the page alone then.
pageTransitionbooleanfalseChanges the page with the switch when the visitor flips it: dusk spreads out of the switch across the page with a glowing edge as the stars come out, and switching back floods it with sunlight. Uses the View Transitions API; elsewhere the theme just changes.
enableSoundbooleantrueA low swell as the light drains, a soft bell as the sun sets, a glassy chord when night falls, and a bright ting and birdsong at sunrise. They also follow the site-wide sound switch.
volumenumber0.8Sound level, 0 to 1.
autoplaybooleanfalseRuns the evening back and forth by itself until the visitor touches it. Never runs under reduced motion.
classNamestring—Extra classes for the card.

Add it to your project

  1. 1

    Set up your project once

    You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:

    npx shadcn@latest init -d

    Starting from nothing? The Quick Start walks through the whole thing.

  2. 2

    Connect the registry with your API key

    Eclipse Toggle is a Pro item, so the CLI has to send your API key. Do this once per project:

    1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
    2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
      NEXUS_API_KEY=nxs_your_key_here
    3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
      "registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}

How Eclipse Toggle works

Run `apply` (which should change the page's theme straight away) inside a change of light that comes out of the sun or the moon: it starts at `origin`, the knob's centre in viewport pixels, as a circle of `from` pixels (the knob itself), opens quickly to `cover` pixels (enough to take in the switch, so it never looks frozen), then spreads on across the page from the same point.

The source, the install command and the build prompt come with Pro.

Eclipse Toggle questions

Does it make sound, and how do I turn it off?

A low swell as the light drains away and a soft bell as the sun sets; at sunrise a bright ting, a rising arpeggio and two birds answering each other. Sounds are synthesised with the Web Audio API, so there are no audio files, and they only play after a click or key press. Pass `enableSound={false}` to silence this component, or call `setSoundsEnabled(false)` from `@/lib/ui-sounds` to switch every sound off at once. The CLI installs `@/lib/ui-sounds` with the component.

More inputs & controls