prince104 · No 104

Dynamic island

Morphing notification pill with smooth spring layout transitions.

Install

pnpm dlx shadcn add @prince-ui/prince104

Dependencies

framer-motionlucide-react

Basic usage

import { DynamicIsland } from "@/components/ui/prince104";

export default function Example() {
  return <DynamicIsland />;
}

Source code

The whole component is one file. Open it with the </> control at the top right of the preview, or take it straight from here.

Keep in mind

Several of these are recreations of interactions I admired elsewhere, rebuilt from scratch and usually extended. I have credited what I could trace — if something of yours is here uncredited, tell me and I will fix it.

License & usage

Free to use and modify in personal and commercial projects.
MIT licensed — no attribution required, though a link back is always welcome.
No paywalled tier, no pro version, no lock-in.

Contact

Found a bug, or built something with it? Send me a note.