Dynamic Island
A physical morphing island component that smoothly transitions between a compact indicator, interactive summary, profile card, and social dock with spring physics.
Loading preview…
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/dynamic-island
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| avatar | string | undefined | URL of user avatar image |
| avatarAlt | string | undefined | Alt text for the avatar image |
| name | string | 'Suraj Maurya' | Display name in expanded and profile views |
| role | string | 'Frontend Developer' | Subtitle or profession title |
| description | string | 'Building thoughtful interfaces...' | Bio or description text rendered in profile view |
| greeting | string | 'Hello, I am [name]' | Custom message displayed in expanded state |
| statusText | string | 'Available for work' | Optional availability chip displayed beside name |
| metadata | DynamicIslandMetadataItem[] | undefined | Key-value badges rendered in profile card |
| socials | DynamicIslandSocials | 5 default links | Social links as an array of items or platform key-value object |
| state | 'collapsed' | 'expanded' | 'profile' | 'share' | undefined | Controlled state value |
| defaultState | 'collapsed' | 'expanded' | 'profile' | 'share' | 'collapsed' | Initial uncontrolled state |
| onStateChange | (state: DynamicIslandState) => void | undefined | Callback invoked whenever state changes |
| profileContent | ReactNode | undefined | Custom ReactNode replacing default profile body |
| shareContent | ReactNode | undefined | Custom ReactNode replacing default share dock |
| className | string | undefined | Optional additional styling applied to the island container |