Device Frame

Browser, phone, laptop and window frames for screenshots, videos or artwork, drawn with theme tokens.

Installation

pnpm dlx shadcn@latest add @portfolio-kit/device-frame

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

A phone with a dynamic island for mobile apps and responsive screenshots. The bezel turns square in square themes.

A laptop lid and base for marketing sites and desktop apps, a softer look than a browser window.

A titled app window holding any markup. Here a code sample sets the height with ratio="auto".

Overlap a browser and a phone to show a responsive build in one hero image.