---
id: tabs
title: Tabs
---

import PhaseBanner, { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';

# Tabs

## How to use

<code src="@digigov/ui/src/navigation/Tabs/__stories__/Default.tsx" />

### With dense style

<code src="@digigov/ui/src/navigation/Tabs/__stories__/Dense.tsx" />

### Using Accordion

<code src="@digigov/ui/src/navigation/Tabs/__stories__/UsingAccordion.tsx" />

### Auto

This is an implementation of the Tabs collection, encapsulated within a `TabsContext` provider, designed to facilitate and manage Tabs functionality effectively.

<PhaseBanner>
    <PhaseBannerTag>EXPERIMENTAL</PhaseBannerTag>
</PhaseBanner>

<code src="@digigov/ui/src/navigation/Tabs/__stories__/UsingAccordion.tsx" />

## Accessibility

You can read more about the accessibility patterns used in our Tabs
implementation in the ARIA Authoring Practices Guide (APG) at [Tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) section.

## API

See below for a complete reference to all of the props  available to the components mentioned here.

<ComponentProps componentName={
  ["Tabs",
  "TabsHeading",
  "TabsList",
  "TabsListItem",
  "TabsPanel",]} />