Dynamic Island

ProNew

A black pill or notch that morphs between views with a spring layout animation.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/dynamic-island

Prop	Type	Default	Description
`view`	`string`	-	Value of the view to show. Changing it morphs the island.
`shape`	`"pill" \| "notch"`	`"pill"`	Pill rounds every corner; notch squares the top corners so it hangs from the top edge.

Also accepts all <div> props.

Prop	Type	Default	Description
`value`	`string`	-	Identifies the view.
`radius`	`number`	`22`	Corner radius in px while this view shows.
`label`	`string`	-	Announced to screen readers when this view appears.

Also accepts all <div> props. Size each view with className; the island takes the size of the active view.