mui / mui/base-ui

[tabs] Add `Tabs.Panels` component with `value` state in `render` function?

Open
#1,486 9 comments 0 reactions 0 assignees View on GitHub
component: tabs type: new feature
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

# Feature request

## Summary

I would like to have more control over how tab panels are rendered, and one way to achieve that would be a `Tabs.Panels` component that, like other components, would accept a `render` function that would get passed some `state`... however, unlike `Tabs.Root` and `Tabs.List`, that state would include the current `value` so that I can use something like [Motion's `AnimatePresence` component to transition from the previous tab panel to the current one](https://motion.dev/docs/react-animate-presence#changing-key).

## Examples in other libraries

Headless UI has [a `TabPanels` component](https://headlessui.com/react/tabs#tab-panels) that has a `selectedIndex` render prop.

## Motivation

Kind of answered in "Summary". Thank you!

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.