Browser

Component 56

About

The Browser component lets you showcase website screenshots or any other content within a realistic browser-style frame.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Browser to your project and fits it to your theme.

Code

How Browser is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Browser } from "@/components/ui/browser";

export default function DemoOne() {
 return (
    <div className="h-[820px] w-full p-3">
      <Browser
        image="https://cdn.21st.dev/assets/mirror/d1/d1c6718c544501b0033003b10447ed9123fdf65e89dd7ac9f97f8c4b1ea97c8e.png"
        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>
  )
}