Tabs

This section previews the Tabs component.

The Tabs component allows you to organize content into multiple sections, enabling users to switch between them easily. This is particularly useful for displaying related content in a compact manner.

Preview

// HelloWorld.java
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

Props

PropTypeDefaultDescription
defaultValuestringnullThe value of the tab that is selected by default.
classNamestring""Additional CSS classes for styling the Tabs component.

Code

<Tabs defaultValue="java" className="pt-5 pb-1">
  <TabsList>
    <TabsTrigger value="java">Java</TabsTrigger>
    <TabsTrigger value="typescript">TypeScript</TabsTrigger>
  </TabsList>
  <TabsContent value="java">
    ```java
    // HelloWorld.java
    public class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Hello, World!");
        }
    }
    ```</TabsContent>
  <TabsContent value="typescript">
    ```typescript
    // helloWorld.ts
    function helloWorld(): void {
        console.log("Hello, World!");
    }
    helloWorld();
    ```</TabsContent>
</Tabs>