Vercel Tabs

Navigation 366

About

Tabs in Vercel style

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

Code

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

Usage.tsx

import { Tabs } from "@/components/ui/vercel-tabs"

const tabs = [
  { id: "overview", label: "Overview" },
  { id: "integrations", label: "Integrations" },
  { id: "activity", label: "Activity" },
  { id: "domains", label: "Domains" },
  { id: "usage", label: "Usage" },
  { id: "monitoring", label: "Monitoring" },
]

export function Page() {
  return (
    <div className="flex justify-center items-center w-full min-h-screen">
      <Tabs
        tabs={tabs}
        onTabChange={(tabId) => console.log(`Tab changed to: ${tabId}`)}
      />
    </div>
  )
}