ComponentsDynamic Island

Dynamic Island

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

Code

1

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

PropTypeDefault
view?
"idle" | "ring" | "timer"
-
onViewChange?
(view: "idle" | "ring" | "timer") => void
-
idleContent?
ReactNode
-
ringContent?
ReactNode
-
timerContent?
ReactNode
-
className?
string
-