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