Browser

PreviousNext

A customizable browser-like component with tabs, bookmarks, history, downloads, and settings simulation.

browser-default

browser-custom

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.

PropTypeDefaultDescription
imagestring"/placeholder.svg"Placeholder image shown when not rendering content.
initialUrlstring"https://dalim.in"The default URL to load on startup.
initialTabsPartialInitial set of tabs to open.
theme"light" | "dark" | "system""system"Browser theme mode.
showWindowControlsbooleanfalseShows macOS-like window control buttons.
showBookmarksBarbooleanfalseDisplays a bookmarks toolbar.
showStatusBarbooleantrueDisplays a status bar at the bottom.
classNamestringAdditional wrapper classes.
enableTabManagementbooleanfalseEnables opening, closing, and switching tabs.
enableBookmarksbooleantrueEnables bookmarks sidebar.
enableHistorybooleantrueEnables browsing history sidebar.
enableDownloadsbooleantrueEnables simulated downloads.
enableSettingsbooleantrueEnables settings sidebar.
maxTabsnumber10Maximum number of open tabs allowed.
customBookmarksBookmark[]Custom list of bookmarks to render.
customHistoryHistoryItem[]Custom browsing history list.
onNavigate(url: string, tabId: string) => voidCallback when navigating to a URL.
onTabCreate(tab: Tab) => voidCallback when a new tab is created.
onTabClose(tabId: string) => voidCallback when a tab is closed.
onDownload(file: DownloadItem) => voidCallback when a new download is triggered.
onBookmarkAdd(bookmark: Bookmark) => voidCallback when a bookmark is added.
onHistoryAdd(entry: HistoryItem) => voidCallback when a history entry is added.