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.

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.