# Tabs
> Use the Tabs component to display different content sections in a switchable panel layout.
Source: https://docs.doccupine.com/tabs
> For the complete documentation index, see [llms.txt](https://docs.doccupine.com/llms.txt).
# Tabs
Use the Tabs component to display different content sections in a switchable panel layout.
Tabs are useful for grouping related information while keeping the interface tidy. You can create as many tabs as needed, and each one can hold other components, text, or code snippets.
## Tabs Usage
You can use the Tabs component directly within your MDX files without any import. The following example shows a basic usage:
````html
☝️ This is the content shown only when the first tab is active.
Tabs can include all kinds of components. For example, a simple Java program:
```java
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
```
✌️ Content inside this second tab is separate from the first.
💪 This third tab contains its own unique content.
````
☝️ This is the content shown only when the first tab is active.
Tabs can include all kinds of components. For example, a simple Java program:
```java
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
```
✌️ Content inside this second tab is separate from the first.
💪 This third tab contains its own unique content.
Each tab also accepts an optional `icon` - any [Lucide](https://lucide.dev/icons) icon name - rendered before its title, as shown above.
## Keyboard navigation
Tabs use the standard horizontal keyboard pattern. Press **Left Arrow** or **Right Arrow** to move between tabs, and **Home** or **End** to jump to the first or last tab. **Up Arrow** and **Down Arrow** continue to scroll the page and are not captured by the tab list.
## Properties
The title of the tab.
Optional [Lucide](https://lucide.dev/icons) icon name (kebab-case, e.g.
`rocket`) shown next to the tab title.
The content of the tabs.