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

Matrix Card

A reusable card component that displays a matrix rain effect on hover, combining smooth animations with canvas-based effects.

Number Flow

A component that animates the transition of numbers, showcasing smooth animations for incrementing and decrementing values.