QuackElements
Browse components+
Components/Tabs

Tabs

A set of layered sections where one content panel is visible at a time.

Interactive example

Your project is configured and ready to ship.

Installation

Run the CLI from your project root. Dependencies and component source are added automatically.

$npx quackelements add tabs

Usage

The generated file lives in your repository, so the component API and styles remain fully editable.

example.tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/quack/tabs"

export function TabsDemo() {
  return (
    <Tabs defaultValue="overview">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">Your project is ready to ship.</TabsContent>
      <TabsContent value="activity">No recent activity.</TabsContent>
    </Tabs>
  )
}