Dark Mode Toggle

Compact sun and moon switch that persists theme preference and toggles the document dark class.

Add to your project

Connect Uniquel to your coding agent before using the component ID.

MCP ID

component:navigation/dark-mode-toggle

Claude*

Codex*

Lovable

Base44

Figma Make

Replit*

Cursor*

* Compatible with most projects that use the default React/Next.js framework.

React

Tailwind CSSFramer Motion

Prop	Type	Description
`storageKey`	`string`	localStorage key for the saved theme
`applyToDocument`	`boolean`	Toggle the dark class on documentElement
`defaultDark`	`boolean`	Initial theme before storage is read
`onChange`	`(dark: boolean) => void`	Fired when the theme changes
`className`	`string`	Styles for the switch

Compact next button with a looping arrow reveal, crisp press feedback, and loading and disabled states.

New: Coverflow Gallery is live — explore the catalog. See what's new

Restrained product update strip with gradient sheen and a clean collapse dismiss.

Minimal locale control with scaled blur-sm menu and staggered options — no native select chrome.

Numbered pagination that keeps the current page visible and collapses long ranges with ellipses.

Compact pagination controls with arrows and dots by default, plus optional page numbers.