Radix UIKeyframes

Tabs

Panels route through Presence like everything else, so active and inactive had to join the vocabulary. Without a matching rule the computed animation-name stays none and Presence unmounts on the same frame.

Radix UI documentation 1.6.7

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

Panels route through Presence like every other primitive, so the outgoing one plays an exit before it unmounts.

with easefuldata-motion="fade"

Overview

Panels route through Presence like every other primitive, so the outgoing one plays an exit before it unmounts.

host writes

data-state="active" | "inactive"

easeful matches

[data-motion~="fade"][data-state="inactive"]

what runs

animation: motion-exit 150ms

you write

<Tabs.Content 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.Trigger
Tabs.Contentdata-motion="fade"

Source

apps/docs/components/demos/radix/tabs.tsx

39 lines

"use client"

import { Tabs } from "radix-ui"
import type { DemoProps } from "@/components/demos/props"

export function RadixTabs({ motion }: DemoProps) {
  return (
    <Tabs.Root defaultValue="one">
      <Tabs.List className="tabs__list">
        <Tabs.Trigger className="tab" value="one">
          Overview
        </Tabs.Trigger>
        <Tabs.Trigger className="tab" value="two">
          Changelog
        </Tabs.Trigger>
      </Tabs.List>
      <div className="tabs__panels">
        <Tabs.Content value="one" data-motion={motion}>
          <div className="panel">
            <p className="panel__title">Overview</p>
            <p className="panel__body">
              Panels route through Presence like every other primitive, so the outgoing one plays
              an exit before it unmounts.
            </p>
          </div>
        </Tabs.Content>
        <Tabs.Content value="two" data-motion={motion}>
          <div className="panel">
            <p className="panel__title">Changelog</p>
            <p className="panel__body">
              Both panels share one grid cell, so they cross over in place instead of pushing
              each other down the page.
            </p>
          </div>
        </Tabs.Content>
      </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.