# Tabs

Host: Base UI. Path: transitions. Preset: `fade`. Built against [@base-ui/react 1.5.0](https://www.npmjs.com/package/@base-ui/react/v/1.5.0).

Keep the panel mounted and the closed state becomes a real hidden state, which allow-discrete can animate.

The page this file mirrors mounts the component twice, once with the attribute and once without, so the only difference between the two is the library.

Upstream documentation: [Base UI documentation](https://base-ui.com/react/components/tabs)

The same component in other hosts: [Radix UI](/radix/tabs.md).

## Where the attribute goes

The parts this demo composes, and the value each one carries. Everything inside an animated part is that part's content, so the tree stops there.

```text
Tabs.Root
  Tabs.List
    Tabs.Tab
  Tabs.Panel  data-motion="fade"
```

## How the match works

| Step | Value |
| --- | --- |
| host writes | `[hidden] on the closed panel` |
| easeful matches | `[data-motion~="fade"][hidden]` |
| what runs | `transition: opacity, display 150ms` |
| you write | `<Tabs.Panel keepMounted data-motion="fade" />` |

## Every value that works here

Every value the manifest allows on this host, single presets and the pairs that compose. The first is what this component ships with. Both stages are the same component, so anything that changes between them is the attribute.

| Value | Link |
| --- | --- |
| `fade` | the default |
| `scale-fade` | [scale-fade](/base-ui/tabs#motion=scale-fade) |
| `slide-up` | [slide-up](/base-ui/tabs#motion=slide-up) |
| `fade slide-up` | [fade slide-up](/base-ui/tabs#motion=fade%20slide-up) |
| `scale-fade slide-up` | [scale-fade slide-up](/base-ui/tabs#motion=scale-fade%20slide-up) |

## Source

`apps/docs/components/demos/base-ui/tabs.tsx`

```tsx
"use client"

import { Tabs } from "@base-ui/react/tabs"
import type { DemoProps } from "@/components/demos/props"

export function BaseUiTabs({ motion }: DemoProps) {
  return (
    <Tabs.Root defaultValue="one">
      <Tabs.List className="tabs__list">
        <Tabs.Tab className="tab" value="one">
          Overview
        </Tabs.Tab>
        <Tabs.Tab className="tab" value="two">
          Changelog
        </Tabs.Tab>
      </Tabs.List>
      <div className="tabs__panels">
        <Tabs.Panel value="one" keepMounted data-motion={motion}>
          <div className="panel">
            <p className="panel__title">Overview</p>
            <p className="panel__body">
              Kept mounted, so the closed panel carries a real hidden state instead of vanishing
              from the tree.
            </p>
          </div>
        </Tabs.Panel>
        <Tabs.Panel value="two" keepMounted data-motion={motion}>
          <div className="panel">
            <p className="panel__title">Changelog</p>
            <p className="panel__body">
              Display is in the transition list under allow-discrete, which is what lets a hidden
              panel animate at all.
            </p>
          </div>
        </Tabs.Panel>
      </div>
    </Tabs.Root>
  )
}
```