Tabs

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

Preview

Installation

npm install @matrix-ui/components

Usage

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@matrix-ui/components'

<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Content 1</TabsContent>
  <TabsContent value="tab2">Content 2</TabsContent>
</Tabs>

Examples

Sizes