{
  "name": "tabs",
  "title": "Tabs",
  "description": "One tab primitive in three languages: a soft sliding pill (default), a springing ember underline, or browser folder chrome where the active tab lifts into paper and merges with the panel.",
  "category": "navigation",
  "install": {
    "command": "npx shadcn@latest add @clow/tabs",
    "registryConfig": {
      "@clow": "https://clow.cards/r/{name}.json"
    }
  },
  "props": {
    "variant": {
      "type": "select",
      "options": [
        "pill",
        "underline",
        "browser"
      ],
      "default": "pill",
      "description": "Tab language: pill, underline, or browser folder chrome."
    }
  },
  "agent": {
    "prompt": "Use Tabs to switch peer views. Compose Tabs > TabsList > TabsTrigger(s) + TabsContent per value. The sliding pill and accent hairline live in TabsList · do not add your own active background on triggers.",
    "examples": [
      "<Tabs defaultValue=\"telemetry\"><TabsList><TabsTrigger value=\"telemetry\">Telemetry</TabsTrigger><TabsTrigger value=\"logs\">Logs</TabsTrigger></TabsList><TabsContent value=\"telemetry\">…</TabsContent><TabsContent value=\"logs\">…</TabsContent></Tabs>"
    ]
  },
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "links": {
    "docs": "https://clow.cards/docs/tabs",
    "markdown": "https://clow.cards/llms/tabs.md",
    "registryItem": "https://clow.cards/r/tabs.json"
  }
}
Draw

Playground

Examples

Props
