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
Component API
Tabs
Container component that manages the tabs state.
Property | Type | Default | Description |
---|---|---|---|
defaultValue | string | undefined | Initially selected tab |
TabsList
Container component that contains the tabs triggers.
TabsTrigger
Individual tab trigger component.
Property | Type | Default | Description |
---|---|---|---|
value | string | undefined | Value of the tab |
TabsContent
Individual tab content component.
Property | Type | Default | Description |
---|---|---|---|
value | string | undefined | Value of the tab |
FAQs
How is this guide?