║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Browser date: 2025-01-27 description: Fully interactive browser component with tabs, bookmarks, history, downloads, and customizable features. author: Karthikeyavarma published: true

<ComponentPreview name="browser-demo" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx shadcn@latest add @eldoraui/browser

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

components/eldoraui/browser.tsx

<ComponentSource name="browser" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

Examples

With Customised Props

<ComponentPreview name="browser-demo-2" />

Usage

import { Browser } from "@/components/eldoraui/browser"

<Browser
  initialUrl="https://www.eldoraui.site"
  showWindowControls={true}
  showBookmarksBar={true}
  showStatusBar={true}
  enableTabManagement={true}
  enableBookmarks={true}
  enableHistory={true}
  enableDownloads={true}
  enableSettings={true}
  maxTabs={8}
  simulateLoading={true}
  loadingDuration={1500}
/>

Props

| Prop | Type | Default | Description | | --------------------- | ------------------------------------------------------ | ------------------------- | ---------------------------------------------- | | image | string | "/placeholder.svg" | Default image to display in content area | | initialUrl | string | "https://eldoraui.site" | Initial URL to load in the browser | | initialTabs | Partial<Tab>[] | - | Initial tabs to display | | theme | "light" \| "dark" \| "system" | - | Theme preference for the browser | | showWindowControls | boolean | false | Show macOS-style window controls | | showBookmarksBar | boolean | false | Show bookmarks bar below address bar | | showStatusBar | boolean | true | Show status bar at the bottom | | className | string | - | Additional CSS classes for styling | | enableTabManagement | boolean | false | Enable tab creation, closing, and switching | | enableBookmarks | boolean | true | Enable bookmark functionality | | enableHistory | boolean | true | Enable browsing history | | enableDownloads | boolean | true | Enable download simulation | | enableSettings | boolean | true | Enable settings panel | | maxTabs | number | 10 | Maximum number of tabs allowed | | customBookmarks | Bookmark[] | - | Custom bookmarks to display | | customHistory | HistoryItem[] | - | Custom history items to display | | onNavigate | (url: string, tabId: string) => void | - | Callback when navigating to a new URL | | onTabCreate | (tab: Tab) => void | - | Callback when a new tab is created | | onTabClose | (tabId: string) => void | - | Callback when a tab is closed | | onTabSwitch | (tabId: string) => void | - | Callback when switching between tabs | | onBookmarkToggle | (url: string, isBookmarked: boolean) => void | - | Callback when bookmark is toggled | | onDownload | (url: string) => void | - | Callback when download is initiated | | renderContent | (url: string, isLoading: boolean) => React.ReactNode | - | Custom content renderer | | customFavicons | Record<string, string> | - | Custom favicon mappings | | openLinksInNewTab | boolean | - | Open links in new tabs by default | | autoFocusAddressBar | boolean | false | Automatically focus the address bar on mount | | simulateLoading | boolean | true | Simulate page loading states | | loadingDuration | number | 1000 | Duration of loading simulation in milliseconds |

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║