Inputs

Shape wipe theme toggle

A sun and moon icon button that switches the panel theme with a shape wipe that grows from the button, swaps the colors at full cover, then shrinks away.

Appearance

How Nightjar Docs looks on this device.

Panels, menus and the editor follow this theme everywhere you sign in.

Using Shape wipe theme toggle

A sun and moon icon button that switches the panel theme with a shape wipe that grows from the button, swaps the colors at full cover, then shrinks away.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: shape, duration, accentColor, fromCenter

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

1949Directional theme wipeInputsA light dark toggle that reveals the new theme with a directional wipe sweeping across the whole frame instead of an instant color swap.

1980Icon crossfade switchInputsA toggle switch whose thumb icon fades and scales into a different icon as the switch flips between off and on.

2058Sun Moon SwitchInputsA pill switch whose thumb slides between two resting positions while a sun icon and a moon icon flanking the track fade in and out to match.

2297Addon Input GroupInputsA text field wrapped in one bordered shell that can carry a leading icon, a trailing button or text, and shares one focus ring across the whole group.

2108Appointment Range CardInputsA card that pairs a single-month date grid with a start-time and end-time field below it, for picking one day plus a time window in one compact block.

2109Appointment Scheduler CardInputsA single date picker framed inside a titled card with a jump to today button in the corner, styled for booking one appointment.