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
atlas-ui/morph-navbar-html-demoRemovedExample
Example of Morph Navbar with a fluid, morphing pill that tracks the active link and hover state built with HTML, CSS, JavaScript and Motion.
Install it
npx shadcn@latest add https://atlasui.dev/r/morph-navbar-html-demo.jsonSource
1<!doctype html>2<html lang="en">3 <head>4 <meta charset="UTF-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />6 <title>Morph Navbar Html Demo- Atlas UI</title>7 <link rel="stylesheet" href="style.css" />8 </head>9 <body>10 <nav id="morph-navbar">11 <div id="morph-navbar-container">12 <a href="#" class="morph-navbar-item">Home</a>13 <a href="#about" class="morph-navbar-item">About</a>14 <a href="#contact" class="morph-navbar-item">Contact</a>15 <a href="#projects" class="morph-navbar-item">Projects</a>16 </div>17 </nav>18 </body>1920 <script type="module" src="script.js"></script>21</html>
What it pulls in
npm packages
Other registry items
