A navbar with a sun and moon switch that repaints the page with a circular wipe starting from the toggle itself. The icon morphs between moon and sun, and the new theme is committed when the wipe lands.
npx shadcn@latest add https://hyperblur.dev/r/navbar-theme-reveal.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/navbar-theme-reveal.tsx.
import { NavbarThemeReveal } from "@/components/hyperblur/navbar-theme-reveal"
<NavbarThemeReveal onThemeChange={(t) => document.documentElement.dataset.theme = t} showBackdrop={false} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Paperline" | Product name next to the logo. |
| links | { label: string; href: string }[] | Features, Templates, Integrations, Pricing | Centered links. They move into a dropdown sheet on narrow screens. |
| cta | { label: string; href: string } | null | { label: "Try it free", href: "#signup" } | Inverted pill button. Pass null to hide it. |
| theme | "dark" | "light" | Controlled theme. Pair with onThemeChange. | |
| defaultTheme | "dark" | "light" | "dark" | Theme when uncontrolled. |
| onThemeChange | (theme: "dark" | "light") => void | Called when the wipe finishes. Apply the theme to the rest of your app here. | |
| duration | number | 700 | Length of the circular wipe in milliseconds. 0 switches instantly. |
| accent | string | "#ff5c35" | Logo half, highlights and focus rings. |
| showBackdrop | boolean | true | Render sample page content behind the navbar for previews. Turn it off in a real layout. |