"use client"

import * as React from "react"
import { Code, DocumentText, Home2 } from "iconsax-react"

import { BrowserTabs, type BrowserTab } from "@/registry/ui/browser-tabs/browser-tabs"

const SEED: BrowserTab[] = [
  { id: "home", label: "Home", icon: <Home2 size={14} color="currentColor" /> },
  {
    id: "docs",
    label: "Docs",
    icon: <DocumentText size={14} color="currentColor" />,
  },
  {
    id: "api",
    label: "API",
    icon: <Code size={14} color="currentColor" />,
  },
]

export default function BrowserTabsBasicDemo() {
  const [tabs, setTabs] = React.useState(SEED)
  const [value, setValue] = React.useState("docs")

  return (
    <BrowserTabs
      className="max-w-md"
      tabs={tabs}
      value={value}
      onValueChange={setValue}
      onClose={(id) => {
        setTabs((prev) => {
          const next = prev.filter((t) => t.id !== id)
          if (id === value && next[0]) setValue(next[0].id)
          return next
        })
      }}
      onNewTab={() => {
        const id = `tab-${Date.now()}`
        setTabs((prev) => [...prev, { id, label: "Untitled" }])
        setValue(id)
      }}
    >
      <p className="font-mono text-[11px] uppercase tracking-[0.14em] text-muted-foreground">
        open · {tabs.find((t) => t.id === value)?.label ?? "none"}
      </p>
      <p className="mt-2 text-sm text-foreground/80">
        Paper tabs for multi-pane product UIs. Active sits on surface-2; close
        and new-tab stay soft.
      </p>
    </BrowserTabs>
  )
}
Draw

Playground

Examples

Props
