Dynamic Island

iOS-style floating navigation bar and expandable media player widget.

Preview

The Dynamic Island is fixed to the bottom of the viewport. Scroll down to see it in action.

Navigation bar is fixed at bottom

Usage

import { DynamicIsland } from "@/components/profile"
import { Home, Search, User, Heart } from "lucide-react"

const items = [
  { icon: Home, label: "Home", href: "/", active: true },
  { icon: Search, label: "Search", href: "/search" },
  { icon: Heart, label: "Favorites", href: "/favorites" },
  { icon: User, label: "Profile", href: "/profile" },
]

<DynamicIsland items={items} position="bottom" />

Position

Place the navigation at the top or bottom of the viewport.

<DynamicIsland position="bottom" /> // Default
<DynamicIsland position="top" />

Dynamic Island Player

An expandable media player widget inspired by iOS Dynamic Island.

Tearing Me Up

import { DynamicIslandPlayer } from "@/components/profile"

<DynamicIslandPlayer
  title="Tearing Me Up"
  artist="Bob Moses"
  image="/album-art.jpg"
  isPlaying={isPlaying}
  onPlayPause={() => setIsPlaying(!isPlaying)}
  onNext={() => handleNext()}
  onPrevious={() => handlePrevious()}
/>

Navigation Props

Prop	Type	Default	Description
items	NavItem[]	-	Navigation items
position	"top" \| "bottom"	"bottom"	Vertical position
className	string	-	Additional CSS classes

Player Props

Prop	Type	Default	Description
title	string	-	Track title
artist	string	-	Artist name
image	string	-	Album artwork URL
isPlaying	boolean	false	Playback state
onPlayPause	() => void	-	Play/pause handler
onNext	() => void	-	Next track handler
onPrevious	() => void	-	Previous track handler

NavItem Type

interface NavItem {
  icon: LucideIcon
  label: string
  href: string
  active?: boolean
}