Skip to content

New301 animated icons, 75 free. See the icons ›

Nexus UI

Window Seat Toggle, animated React component

A light/dark theme switch drawn as an aeroplane window set in a piece of cabin wall. Outside it's a bright blue sky over a drifting sea of cumulus with the tip of a wing. Grab the shade's tab and pull it down: it follows your finger with a little resistance, and the light in the cabin follows it: the daylight on the wall and in the recess shrinks to the open strip of glass, the room's exposure drops, the sunlit shade glows warm, and near the bottom only a thin line of light leaks round its sides and under its lip. Let go past halfway and it snaps shut with a soft bounce, the cabin dims, and a moment later the shade glides back up by itself on a night sky of stars, a crescent moon, lilac clouds and amber city lights far below. Pull it again and it's day. Let go early and it springs back open. A click anywhere on the window runs the whole thing for you, and the view shifts slightly against your pointer. Applying the theme is your job, for example: <WindowSeatToggle onThemeChange={(t) => { document.documentElement.dataset.theme = t; }} /> Keyboard: focus the window; Space or Enter toggles, Arrow Down closes towards dark, Arrow Up opens towards light.

  • Pro
  • Inputs & Controls
  • Spring

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Light

Pull the shade down for dark mode.

Props

PropTypeDefaultWhat it does
themeWindowSeatTheme—the current theme (controlled)
defaultThemeWindowSeatTheme"light"the theme to start on (uncontrolled)
onThemeChange(theme: WindowSeatTheme) => void—Called when the visitor uses theme change.
labels{ light?: string; dark?: string; lightHint?: string; darkHint?: string }—The labels shown in the component.
autoplaybooleanfalsePlays a demo by itself until the first touch. Held still under reduced motion.
classNamestring""Extra classes for the outer element.

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

    Window Seat 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}"
    }
  }
}

More inputs & controls