Navbar With Theme Toggle

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/navbar/navbar9.tsx instead.

Usage

The file also exports navbar9Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Navbar9, navbar9Demo } from "@/components/blocks/navbar/navbar9";

export default function Page() {
  return <Navbar9 {...navbar9Demo} />;
}

Props

Behavior notes

• Real client-side state: clicking the toggle button flips a useState boolean and swaps between lucide-react's Sun and Moon icons.
• This toggle is decorative and inert with respect to the site itself: it only changes its own local icon state and does not change this site's actual theme, which is controlled site-wide elsewhere. Do not mistake this for a working theme switcher.
• The CTA button is a static Link-as-Button, it does not perform any real navigation beyond the href you supply.