Tabs

Switch between related views without new routes.

Account overview

Example

import { Tabs, TabsContent, TabsList, TabsTrigger } from "matcha-ui";

<Tabs defaultValue="overview" className="w-full max-w-md">
  <TabsList className="w-full sm:w-auto">
    <TabsTrigger value="overview" className="flex-1 sm:flex-initial">
      Overview
    </TabsTrigger>
    <TabsTrigger value="billing" className="flex-1 sm:flex-initial">
      Billing
    </TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Account overview</TabsContent>
  <TabsContent value="billing">Invoices and payment method</TabsContent>
</Tabs>