Components
BrowserCard
The BrowserCard component is a reusable, styled React UI element that mimics the look of a mini web browser window. It includes a tab bar, browser controls (back, forward, refresh, minimize, maximize, close), and an address bar with interactive buttons and input. The component is fully customizable through props like tabTitle, url, and navigation state (canGoBack, canGoForward). It’s built with Next.js, TypeScript, Tailwind CSS, and shadcn/ui components for a clean, modern look — perfect for showcasing previews, dashboards, or simulated web pages in a card-like layout.
"use client";
import { BrowserCard } from "@/components/ui/browser-card";
export default function BrowserCardDemoPage() {
return (
<main className="flex justify-content items-center">
{/* Example with different props/size */}
<BrowserCard
tabTitle="Ruixen"
url="ruixen.com"
canGoForward
className="h-[480px] w-[660px]"
/>
</main>
);
}
Dependencies
Published
Similar components
Explore more
Part of Ruixen UI — browse the full library on 21st.dev.