1

Laptop Mockup

A laptop device-frame illustration for showcasing app screens.

Props

Options you can pass to customize this component.

Prop
Type
Description
variant
"gray" | "titanium"

Chassis color. Defaults to "gray".

className
string

Extra classes merged onto the root element.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/laptop-mockup.json

How to use

import { LaptopMockupCard } from "@/components/illustration/laptop-mockup"

export function Example() {
  return (
    <LaptopMockupCard variant="titanium">
      <YourAppScreen />
    </LaptopMockupCard>
  )
}

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
Screen
npx shadcn@latest addhttps://ui.nexvyn.dev/r/laptop-mockup.json