Getting Started
Text Animations
Buttons
SVGS
import { MacbookPro } from "@/registry/datthuui/macbook-pro"
export function MacbookProDemo() {
return (
<div className="relative">
<MacbookPro
src="https://images.unsplash.com/photo-1502790671504-542ad42d5189?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG1hY2Jvb2slMjBwcm8lMjB3YWxscGFwZXJ8ZW58MHx8MHx8fDA%3D"
className="size-full"
/>
</div>
)
}
Installation
pnpm dlx shadcn@latest add "https://ui.datthu.site/r/macbook-pro.json"
Usage
import { MacbookPro } from "@/components/ui/macbook-pro"<MacbookPro
src="https://images.unsplash.com/photo-1502790671504-542ad42d5189?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG1hY2Jvb2slMjBwcm8lMjB3YWxscGFwZXJ8ZW58MHx8MHx8fDA%3D"
width={650}
height={400}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | - | The source of the image to display on the screen |
width | number | 650 | The width of the MacBook Pro mockup |
height | number | 400 | The height of the MacBook Pro mockup |
className | string | - | Additional CSS classes for styling |