Dynamic Island

A dark capsule that opens into a menu.

npm install motion @radix-ui/react-slot class-variance-authority clsx tailwind-merge

Installation

npm install motion @radix-ui/react-slot class-variance-authority clsx tailwind-merge

Then copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.

Prop	Type	Default	Description
logo	ReactNode	-	Your logo. It inherits currentColor.
items	NavItem[]	-	Links: label, href, optional icon and children.
cta	{ label: string; href: string }	-	Optional call-to-action button.
className	string	-	Extra classes for the outer element.