Dynamic Island

A reusable Dynamic Island component inspired by Apple's design, featuring smooth state transitions and animations.

Code

Install with shadcn Beta

Terminal

npx shadcn@latest add "https://smoothui.dev/r/dynamic-island.json"

Or install the demo

Terminal

npx shadcn@latest add "https://smoothui.dev/r/dynamic-island-demo.json"

How to use

Demo.tsx

"use client"

import React, { useState } from "react"

import DynamicIsland, {
  DynamicIslandProps,
} from "@/components/smoothui/ui/DynamicIsland"

const DynamicIslandDemo = () => {
  const [view, setView] = useState<DynamicIslandProps["view"]>("idle")

  return <DynamicIsland view={view} onViewChange={setView} />
}

export default DynamicIslandDemo

Props

Prop	Type	Description
view?	"idle" \| "ring" \| "timer"	Controlled view state.
onViewChange?	(view: "idle" \| "ring" \| "timer") => void	Callback when the view changes.
idleContent?	ReactNode	Custom content for idle state.
ringContent?	ReactNode	Custom content for ring state.
timerContent?	ReactNode	Custom content for timer state.
className?	string	Optional additional class names for the root container.