Newsletter is now available!
Quotion

Tabs

Use MDX Tabs components to create tabbed content sections in your posts.

Usage

<Tabs defaultValue="JavaScript">
  <TabsList>
    <TabsTrigger value="JavaScript">
      JavaScript
    </TabsTrigger>
    <TabsTrigger value="TypeScript">
      TypeScript
    </TabsTrigger>
  </TabsList>
  <TabsContent value="JavaScript">
    JavaScript, often abbreviated as `JS`, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. Ninety-nine percent of websites use JavaScript on the client side for webpage behavior.

    Web browsers have a dedicated JavaScript engine that executes the client code. These engines are also utilized in some servers and a variety of apps. The most popular runtime system for non-browser usage is Node.js.
  </TabsContent>
  <TabsContent value="TypeScript">
    TypeScript (abbreviated as `TS`) is a high-level programming language that adds static typing with optional type annotations to JavaScript. It is designed for developing large applications and transpiles to JavaScript.[6] It is developed by Microsoft as free and open-source software released under an Apache License 2.0.

    TypeScript may be used to develop JavaScript applications for both client-side and server-side execution (as with React.js, Node.js, Deno or Bun). Multiple options are available for transpiling. The default TypeScript Compiler can be used,[7] or the Babel compiler can be invoked to convert TypeScript to JavaScript.
  </TabsContent>
</Tabs>

Preview

Tabs demo

Component API

Tabs

Container component that manages the tabs state.

PropertyTypeDefaultDescription
defaultValuestringundefinedInitially selected tab

TabsList

Container component that contains the tabs triggers.

TabsTrigger

Individual tab trigger component.

PropertyTypeDefaultDescription
valuestringundefinedValue of the tab

TabsContent

Individual tab content component.

PropertyTypeDefaultDescription
valuestringundefinedValue of the tab

FAQs

How is this guide?