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
Prop | Type | Default |
---|---|---|
view? | "idle" | "ring" | "timer" | - |
onViewChange? | (view: "idle" | "ring" | "timer") => void | - |
idleContent? | ReactNode | - |
ringContent? | ReactNode | - |
timerContent? | ReactNode | - |
className? | string | - |