Dynamic Island navbar for React

A pill navbar that morphs for a notification, a music player and search.

Get the code · $3React · Tailwind · TypeScript
Dynamic Island Navbar, preview

Use it in Next.js

"use client";
import { DynamicIsland } from "@/components/DynamicIsland";

export default function Nav() {
  return (
    <div className="relative h-40">
      <DynamicIsland items={["Docs", "Pricing", "Blog"]} onSelect={(item) => console.log(item)} />
    </div>
  );
}

Install

  1. Copy from the zipPut react/src/components into src/, then npm i framer-motion.
  2. Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

items
what search finds
onSelect
a search result was picked
notificationTitle
text for the notification state
accent
any hex colour

Questions

Does the island work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Can I drop the music player?

Yes. Each state is driven by props and callbacks, so you show the ones you need.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.