DynamicIsland

Copy
import {
  DynamicIsland,
  DynamicIslandProvider,
  DynamicContainer,
  DynamicDiv,
  DynamicDescription,
  DynamicTitle,
  useDynamicIslandSize,
} from "@/components/ui/dynamic-island"

Copy
const STATES = ["compact", "large", "tall", "long", "medium"] as const
 
function DynamicIslandContent() {
  const { state, setSize } = useDynamicIslandSize()
 
  const cycleState = () => {
    const currentIndex = STATES.indexOf(state.size as (typeof STATES)[number])
    const nextIndex = (currentIndex + 1) % STATES.length
    setSize(STATES[nextIndex])
  }
 
  const renderState = () => {
    switch (state.size) {
      case "compact":
        return (
          <DynamicContainer className="flex h-full w-full items-center justify-between px-4 text-white">
            <DynamicDescription className="text-sm opacity-80">Now playing</DynamicDescription>
            <DynamicTitle className="text-sm font-semibold">Cult FM</DynamicTitle>
          </DynamicContainer>
        )
      case "large":
        return (
          <DynamicContainer className="flex h-full w-full items-center justify-center">
            <DynamicTitle className="text-2xl font-black text-white">Syncing...</DynamicTitle>
          </DynamicContainer>
        )
      case "tall":
        return (
          <DynamicContainer className="flex h-full w-full flex-col items-start gap-2 p-5 text-white">
            <DynamicTitle className="text-xl font-bold">New message</DynamicTitle>
            <DynamicDescription className="text-sm text-neutral-300">
              Your team invited you to review the latest release.
            </DynamicDescription>
          </DynamicContainer>
        )
      default:
        return (
          <DynamicContainer className="flex h-full w-full items-center justify-center">
            <DynamicDiv className="text-sm text-white/90">Tap to cycle states</DynamicDiv>
          </DynamicContainer>
        )
    }
  }
 
  return (
    <>
      <button onClick={cycleState}>Cycle</button>
      <DynamicIsland id="example-island">{renderState()}</DynamicIsland>
    </>
  )
}
 
export default function Example() {
  return (
    <DynamicIslandProvider initialSize="default">
      <DynamicIslandContent />
    </DynamicIslandProvider>
  )
}

Copy
const { setSize } = useDynamicIslandSize()
 
setSize("compact")
setSize("medium")

Copy
const { state } = useDynamicIslandSize()
 
<span>Current: {state.size}</span>
<span>Previous: {state.previousSize}</span>

Copy
import { useScheduledAnimations } from "@/components/ui/dynamic-island"
 
function IntroSequence() {
  useScheduledAnimations([
    { size: "compact", delay: 800 },
    { size: "large", delay: 1200 },
    { size: "tall", delay: 1400 },
    { size: "medium", delay: 1000 },
  ])
 
  return null
}