Getting Started
Text Animations
Buttons
SVGS
import { Safari } from "@/registry/datthuui/safari-browser"
export function SafariBrowserDemo() {
return (
<div className="relative">
<Safari
url="ui.datthu.site"
src="https://images.unsplash.com/photo-1763063462165-94125cccf210?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwyMXx8fGVufDB8fHx8fA%3D%3D"
className="size-full"
/>
</div>
)
}
Installation
pnpm dlx shadcn@latest add "https://ui.datthu.site/r/safari-browser.json"
Usage
import { Safari } from "@/components/ui/safari-browser"<Safari
url="ui.datthu.site"
src="https://images.unsplash.com/photo-1763063462165-94125cccf210?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwyMXx8fGVufDB8fHx8fA%3D%3D"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
url | string | - | The URL to display in the address bar |
src | string | - | The source of the image to display |
width | number | 1203 | The width of the Safari window |
height | number | 753 | The height of the Safari window |