184 Components
MacBook Pro Mockup
MockupsPrecision Apple MacBook Pro laptop hardware frame with a camera notch, aluminum chassis base deck, Liquid Retina XDR screen viewport, and 3D cursor parallax tilt.
FinderFileEditViewWindowHelp
Mon Oct 129:41 AM
F
S
T
C
N
M
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/mac-book-pro-mockup.json"
Props
TypeScript props supported by <MacBookProMockup />.
| Prop | Type | Default | Description |
|---|---|---|---|
| color | "space-black" | "silver" | "space-black" | Aluminum chassis finish. |
| enableTilt | boolean | true | Enable 3D cursor parallax tilt. |
| children | React.ReactNode | — | Custom app UI, video, or screenshot. |
Key Features
- Hardware-accurate aluminum top lid with display notch and slim bezels.
- Integrated bottom keyboard deck lip and display opening indentation.
- Realistic specular light glare overlay that reacts to cursor position.
- Space Black and Silver aluminum finishes.
- Responsive aspect ratio (16:10) that scales cleanly on all viewport widths.
Keyboard & Accessibility
- Respects prefers-reduced-motion by disabling 3D rotation and specular glare shifts.
- Interactive children remain fully accessible and focusable.