# Tab Panel
[component-header:sl-tab-panel]
Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
```html preview
General
Custom
Advanced
Disabled
This is the general tab panel.
This is the custom tab panel.
This is the advanced tab panel.
This is a disabled tab panel.
```
```jsx react
import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
const App = () => (
General
Custom
Advanced
Disabled
This is the general tab panel.
This is the custom tab panel.
This is the advanced tab panel.
This is a disabled tab panel.
);
```
?> Additional demonstrations can be found in the [tab group examples](/components/tab-group).
[component-metadata:sl-tab-panel]