Skip to content

Smooth Scroll

Lenis-powered inertial scrolling for the page or a container, with smooth anchor links and a useLenis() hook. Off under reduced motion; touch stays native.

Installation

pnpm dlx shadcn@latest add @portfolio-kit/smooth-scroll
First time? Add the @portfolio-kit registry to components.json
components.json
{
  "registries": {
    "@portfolio-kit": "https://www.parthjadhav.com/products/portfolio-kit/r/{name}.json"
  }
}

Usage

Examples

Scroll container

root={false} smooths one panel instead of the page, like a changelog or a long list inside a card. At either end the wheel passes back to the page.

Horizontal gallery

orientation="horizontal" turns the mouse wheel into a smooth sideways glide through a strip of project covers. At either end, the wheel scrolls the page again.

API Reference

Used in