• Docs
  • Components
  • Tabs

Tabs

Organize content into multiple sections with switchable tabs.

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
// HelloWorld.java
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

Props

PropTypeDefaultDescription
classNamestringnullAdditional CSS classes for styling the Tabs component.

Output Markdown

md
::::tabs{className="pt-5 pb-1"}
:::tab{title="Java"}
```java:HelloWorld.java
// HelloWorld.java
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
```
:::

:::tab{title="TypeScript"}
```typescript:helloWorld.ts
// helloWorld.ts
function helloWorld(): void {
    console.log("Hello, World!");
}
helloWorld();
```
:::
::::
Edit this page

Last updated Aug 13, 2026