Documentation
Built-ins
Tabs

Tabs

tabs component

The section blog theme inbuilt provide a tabs component built-in based on the shadcn UI (opens in a new tab).

Example

<Tabs defaultValue="npm" className="w-[624px]">
  <TabsList>
    <TabsTrigger className="mx-1" value="npm">NPM</TabsTrigger>
    <TabsTrigger className="mx-1" value="yarn">Yarn</TabsTrigger>
    <TabsTrigger className="mx-1" value="pnpm">PNPM</TabsTrigger>
  </TabsList>
  <TabsContent value="npm">
  ``` npm install nextra section-theme-blog ```
  </TabsContent>
  <TabsContent value="yarn">
  ``` yarn add nextra section-theme-blog ```
  </TabsContent>
  <TabsContent value="pnpm">
  ``` pnpm add nextra section-theme-blog ```
  </TabsContent>
</Tabs>

How to use it?

 
import { Tabs, TabsContent, TabsList, TabsTrigger } from "section-blog-theme/components"
 
<Tabs defaultValue="npm" className="w-[624px]">
  <TabsList>
    <TabsTrigger className="mx-1" value="npm">NPM</TabsTrigger>
    <TabsTrigger className="mx-1" value="yarn">Yarn</TabsTrigger>
    <TabsTrigger className="mx-1" value="pnpm">PNPM</TabsTrigger>
  </TabsList>
  <TabsContent value="npm">
  ``` npm install nextra section-theme-blog ```
  </TabsContent>
  <TabsContent value="yarn">
  ``` yarn add nextra section-theme-blog ```
  </TabsContent>
  <TabsContent value="pnpm">
  ``` pnpm add nextra section-theme-blog ```
  </TabsContent>
</Tabs>
SpaceDeploy