Fit Text

Text that scales to exactly fill its container's width, for giant footer wordmarks and hero names. Each line fits on its own, with any font.

Installation

pnpm dlx shadcn@latest add @portfolio-kit/fit-text

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"
  }
}

Each FitTextLine fills the width on its own, so a short first name lands huge and a long surname smaller — the stacked poster look.

It fits its container, not the viewport: headline numbers that fill each card of a grid, capped with max.