Base UITransitions

Tabs

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

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.

withoutno attribute

Overview

Kept mounted, so the closed panel carries a real hidden state instead of vanishing from the tree.

with easefuldata-motion="fade"

Overview

Kept mounted, so the closed panel carries a real hidden state instead of vanishing from the tree.

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" />

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.

Tabs.Root
Tabs.List
Tabs.Tab
Tabs.Paneldata-motion="fade"

Source

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

39 lines

"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>
  )
}

The whole file, read from disk at build time. Both copies above render from it, and the motion prop is the only difference between them.