This component no longer exists. It was in atlas-ui’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-13 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.
Morph Navbar Demo
atlas-ui/morph-navbar-demoRemovedExample
Example of Morph Navbar with a fluid, morphing pill that tracks the active link and hover state.
Install it
npx shadcn@latest add https://atlasui.dev/r/morph-navbar-demo.jsonSource
1"use client";23import { useState } from "react";45import {6 MorphNavbar,7 MorphNavbarItem,8} from "@/registry/react/atlasui/morph-navbar";910export const MorphNavbarDemo = () => {11 // This useState is used only for demo purposes. Kindly use usePathname() hook for Next.js or equivalent for other frameworks.12 const [activeHref, setActiveHref] = useState("#");1314 const items = [15 {16 label: "Home",17 href: "#",18 },19 {20 label: "About",21 href: "#about",22 },23 {24 label: "Contact",25 href: "#contact",26 },27 {28 label: "Projects",29 href: "#projects",30 },31 ];3233 return (34 <MorphNavbar activeHref={activeHref}>35 {items.map((item, index) => (36 <div key={index} onClick={() => setActiveHref(item.href)}>37 <MorphNavbarItem href={item.href}>{item.label}</MorphNavbarItem>38 </div>39 ))}40 </MorphNavbar>41 );42};
What it pulls in
Other registry items
