Command Menu

Search documentation, components, and switch theme.

Atoms

Tabs

Tabbed navigation built on Radix UI.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/tabs

Install the following dependencies:

npm install radix-ui class-variance-authority

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
<Tabs defaultValue="transactions">
  <TabsList>
    <TabsTrigger value="transactions">Transactions</TabsTrigger>
    <TabsTrigger value="accounts">Accounts</TabsTrigger>
    <TabsTrigger value="metadata">Metadata</TabsTrigger>
  </TabsList>
  <TabsContent value="transactions">
    Browse and filter all ledger transactions.
  </TabsContent>
  <TabsContent value="accounts">
    View account balances and details.
  </TabsContent>
  <TabsContent value="metadata">
    Inspect and edit transaction metadata.
  </TabsContent>
</Tabs>