browser-default
Ready Secure
Zoom: 100%1 tab
import { Browser } from "@/components/ui/mockups/browser"
export function Component() {
return (
<div className="h-[500px]">
<Browser />
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/browser-default.json"browser-custom
12:34 PM
New Tab
Ready Secure
Zoom: 100%1 tab
import { Browser } from "@/components/ui/mockups/browser"
export function Component() {
return (
<div className="h-[620px]">
<Browser
initialUrl="https://www.dalim.in"
showWindowControls={true}
showBookmarksBar={true}
showStatusBar={true}
enableTabManagement={true}
enableBookmarks={true}
enableHistory={true}
enableDownloads={true}
enableSettings={true}
maxTabs={8}
simulateLoading={true}
loadingDuration={1500}
/>
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/browser-custom.json"Installation
pnpm dlx shadcn@latest add https://ui.dalim.in/r/styles/default/browser.json
Usage
import { Browser } from "@/components/ui/ai/browser"<Browser
showWindowControls
enableTabManagement
showBookmarksBar
enableDownloads
enableHistory
enableSettings
autoFocusAddressBar
/>API Reference
Browser
The main Browser component. It accepts multiple configuration props to simulate a browser-like UI.
| Prop | Type | Default | Description |
|---|---|---|---|
image | string | "/placeholder.svg" | Placeholder image shown when not rendering content. |
initialUrl | string | "https://dalim.in" | The default URL to load on startup. |
initialTabs | Partial | – | Initial set of tabs to open. |
theme | "light" | "dark" | "system" | "system" | Browser theme mode. |
showWindowControls | boolean | false | Shows macOS-like window control buttons. |
showBookmarksBar | boolean | false | Displays a bookmarks toolbar. |
showStatusBar | boolean | true | Displays a status bar at the bottom. |
className | string | – | Additional wrapper classes. |
enableTabManagement | boolean | false | Enables opening, closing, and switching tabs. |
enableBookmarks | boolean | true | Enables bookmarks sidebar. |
enableHistory | boolean | true | Enables browsing history sidebar. |
enableDownloads | boolean | true | Enables simulated downloads. |
enableSettings | boolean | true | Enables settings sidebar. |
maxTabs | number | 10 | Maximum number of open tabs allowed. |
customBookmarks | Bookmark[] | – | Custom list of bookmarks to render. |
customHistory | HistoryItem[] | – | Custom browsing history list. |
onNavigate | (url: string, tabId: string) => void | – | Callback when navigating to a URL. |
onTabCreate | (tab: Tab) => void | – | Callback when a new tab is created. |
onTabClose | (tabId: string) => void | – | Callback when a tab is closed. |
onDownload | (file: DownloadItem) => void | – | Callback when a new download is triggered. |
onBookmarkAdd | (bookmark: Bookmark) => void | – | Callback when a bookmark is added. |
onHistoryAdd | (entry: HistoryItem) => void | – | Callback when a history entry is added. |