refactor: compound and named pattern

[tianenpang]

Closes #

📝 Description

This PR refactors the Compound pattern and adds support for the Named pattern.

⛳️ Current behavior (updates)

Previously, only Foo.Root was supported, components had to follow the .Root usage pattern.

🚀 New behavior

Now both compound (Foo, Foo.Root) and named (FooRoot) component patterns are supported.

💣 Is this a breaking change (Yes/No):

Yes.

Component usage remains backward compatible, but type references are not. The namespace-style syntax Avatar.RootProps is no longer supported, use the object-style syntax instead: Avatar["RootProps"].

Renamed TabListWrapper to TabListContainer across all exports, updated CSS class .tabs__list-wrapper to .tabs__list-container, updated data attribute data-slot="tabs-list-wrapper" to data-slot="tabs-list-container".

Added Changelog for v3.0.0-alpha.36.

📝 Additional Information

For single-component exports (e.g. Button), all of the following patterns are now supported:

• Button
• Button.Root
• ButtonRoot

💡 Example

Component Usage Example

() => {
  return (
    <>
      <Button>Label</Button>
      
      {/* compound component - with root */}
      <Button.Root>Label</Button.Root>
      
      {/* named component - with root */}
      <ButtonRoot>Label</ButtonRoot>
    </>
  )
}

Component Usage Example

() => {
  return (
    <>
      {/* compound component - no root */}
      <Avatar>
        <Avatar.Image src="..." alt="..." />
        <Avatar.Fallback>...</Avatar.Fallback>
      </Avatar>

      {/* compound component - with root */}
      <Avatar.Root>
        <Avatar.Image src="..." alt="..." />
        <Avatar.Fallback>...</Avatar.Fallback>
      </Avatar.Root>

      {/* named component - no root */}
      <Avatar>
        <AvatarImage src="..." alt="..." />
        <AvatarFallback>...</AvatarFallback>
      </Avatar>

      {/* named component - with root */}
      <AvatarRoot>
        <AvatarImage src="..." alt="..." />
        <AvatarFallback>...</AvatarFallback>
      </AvatarRoot>

      {/* mixed */}
      <Avatar.Root>
        <AvatarImage src="..." alt="..." />
        <AvatarFallback>...</AvatarFallback>
      </Avatar.Root>
    </>
  )
}

Type Reference Example

import type { Avatar, AvatarProps, AvatarRootProps } from '@heroui/react';

type MyAvatarProps = AvatarProps;
type MyAvatarProps = AvatarRootProps;
type MyAvatarProps = Avatar["Props"];
type MyAvatarProps = Avatar["RootProps"];
type MyAvatarProps = React.ComponentProps<typeof Avatar>;
type MyAvatarProps = React.ComponentProps<typeof Avatar.Root>;
type MyAvatarProps = React.ComponentProps<typeof AvatarRoot>;
// type MyAvatarProps = Avatar.RootProps; 🚨 no longer supported

[changeset-bot]

⚠️ No Changeset found

Latest commit: b350aee

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
heroui	Ready	Preview	Comment	Oct 26, 2025 10:21pm
heroui-sb	Ready	Preview	Comment	Oct 26, 2025 10:21pm

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch refactor/v3-compound-pattern

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[jrgarciadev]

excellent! @tianenpang