Scroll Island

A dynamic and interactive component that displays scroll progress with animated visuals and an expandable area for additional content.

Note: This component requires @number-flow/vue as a dependency.

Install using CLI

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://inspira-ui.com/r/scroll-island.json"

npm

pnpm

bun

yarn

npm install @number-flow/vue

ScrollIsland.vue

Prop Name	Type	Default	Description
`class`	`string`	`""`	Additional CSS classes for custom styling.
`title`	`string`	`"Progress"`	Title displayed in the header of the component.
`height`	`string`	`44`	Height of the component.

Scroll Progress Tracking: Dynamically displays the scroll progress of the page as a percentage.
Expandable Layout: Transforms between a circular and a rectangular layout based on user interaction.
Animated Circular Progress Bar: Displays a visually appealing progress bar with smooth transitions.
Dynamic Content Slot: Supports additional content in the expandable section.
Dark Mode Support: Adapts to the dark or light mode of the user's system preferences.

On This Page