@omkarwarik1204/dynamic-island-navbar

A floating, Apple-style Dynamic Island navbar for React — a centered dark pill that smoothly stretches on hover. Built with React + Tailwind CSS, shipped with TypeScript types and zero runtime dependencies.

Features

• 🎯 Floating, centered "Dynamic Island" pill
• ✨ Smooth horizontal stretch animation on hover
• 📱 Fixed-position, stays at the top while scrolling
• 🧩 Fully typed (TypeScript declarations included)
• 🪶 Tiny — React is a peer dependency, not bundled

Installation

npm install @omkarwarik1204/dynamic-island-navbar

Requires React 19+ in your project (it's a peer dependency — most React projects already have it).

Quick Start (in 3 steps)

1. Install

npm install @omkarwarik1204/dynamic-island-navbar

2. Import the component and the CSS

import { DynamicIslandNavbar } from "@omkarwarik1204/dynamic-island-navbar";
import "@omkarwarik1204/dynamic-island-navbar/style.css";

3. Drop it into your JSX

<DynamicIslandNavbar />

That's it. You don't need Tailwind installed in your project — the styles are bundled in.

Usage

import { DynamicIslandNavbar } from "@omkarwarik1204/dynamic-island-navbar";
import "@omkarwarik1204/dynamic-island-navbar/style.css";

function App() {
  return (
    <DynamicIslandNavbar
      brand="Omkar"
      links={[
        { label: "Home", href: "#home" },
        { label: "Projects", href: "#projects" },
        { label: "About", href: "#about" },
        { label: "Contact", href: "#contact" },
      ]}
      ctaHref="https://github.com/omkarwarik02"
    />
  );
}

export default App;

⚠️ Don't forget the CSS import. Without import '.../style.css' the navbar renders unstyled (no pill, no positioning). This works whether or not your own project uses Tailwind.

Minimal usage

Pass nothing and you get sensible defaults:

<DynamicIslandNavbar />

Props

| Prop | Type | Default | Description | | ---------- | ----------------------------------- | -------------- | ---------------------------------------------------- | | brand | string | "Brand" | Text shown on the left of the pill (your name/logo). | | links | { label: string; href: string }[] | 4 sample links | The center navigation links. | | ctaHref | string | "#" | URL for the right-side action item. | | ctaLabel | React.ReactNode | </> | Content shown on the right (text, icon, etc.). |

All props are optional — the component renders sensible defaults if you pass nothing.

Styling notes

• The component is position: fixed, so it pins to the top-center of the viewport regardless of where you place it in your JSX. Render it once, near the root of your app.
• Colors and shape are baked into the bundled style.css. To customize beyond the props, fork the component or override with your own CSS targeting the pill.

TypeScript

Types are bundled — you get full autocomplete and type-checking out of the box, no @types package needed.

import { DynamicIslandNavbar } from "@omkarwarik1204/dynamic-island-navbar";
// `brand`, `links`, `ctaHref`, `ctaLabel` are all type-checked

License

MIT © Omkar Warik