Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Make changes to your account here.

Installation

npx neobrutal add tabs

Usage

import { Tabs, TabsContent, TabsTrigger } from "@/components/ui/tabs"

const [activeTab, setActiveTab] = React.useState("account")

<div className="w-[400px]">
  <Tabs>
    <TabsTrigger isActive={activeTab === "account"} onClick={() => setActiveTab("account")}>
      Account
    </TabsTrigger>
    <TabsTrigger isActive={activeTab === "password"} onClick={() => setActiveTab("password")}>
      Password
    </TabsTrigger>
  </Tabs>
  <TabsContent isActive={activeTab === "account"} className="mt-4 p-4 border-2 border-black bg-white shadow-brutal">
    Make changes to your account here.
  </TabsContent>
  <TabsContent isActive={activeTab === "password"} className="mt-4 p-4 border-2 border-black bg-white shadow-brutal">
    Change your password here.
  </TabsContent>
</div>