v3.0.0-alpha.35

This release introduces a major breaking change: all compound components have been migrated from dot notation to named exports to ensure full compatibility with React Server Components (RSC).

Installation

Update to the latest version:

npm i @heroui/styles@alpha @heroui/react@alpha

pnpm add @heroui/styles@alpha @heroui/react@alpha

yarn add @heroui/styles@alpha @heroui/react@alpha

bun add @heroui/styles@alpha @heroui/react@alpha

Breaking Changes

Dot Notation to Named Exports Migration

All compound components have been migrated from dot notation (e.g., Card.Header) to named exports (e.g., CardHeader) to ensure compatibility with React Server Components. The Object.assign pattern used for dot notation is not supported in RSC environments.

Why This Change?

1. React Server Components Compatibility: The new pattern works seamlessly with RSC as it doesn't rely on Object.assign
2. Better Tree Shaking: Individual exports can be tree-shaken more effectively
3. Clearer Imports: Explicit imports make it clearer which components are being used
4. Enhanced Type Safety: Each component part has its own type definition, improving TypeScript support

Affected Components

All 16 compound components have been affected by this change:

• Accordion
• Alert
• Avatar
• Card
• Disclosure & DisclosureGroup
• Fieldset
• Kbd
• Link
• Popover
• RadioGroup
• Slider
• Switch & SwitchGroup
• Tabs
• Tooltip

Migration Guide

Before and After Examples

Card Component

Before (v3.0.0-alpha.34):

import { Card } from "@heroui/react"

<Card>
  <Card.Header>
    <Card.Title>Card Title</Card.Title>
    <Card.Description>Card description</Card.Description>
  </Card.Header>
  <Card.Content>
    Card content
  </Card.Content>
  <Card.Footer>
    Card footer
  </Card.Footer>
</Card>

After (v3.0.0-alpha.35):

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@heroui/react"

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description</CardDescription>
  </CardHeader>
  <CardContent>
    Card content
  </CardContent>
  <CardFooter>
    Card footer
  </CardFooter>
</Card>

Tabs Component

Before:

import { Tabs } from "@heroui/react"

<Tabs>
  <Tabs.List>
    <Tabs.Tab id="tab1">Tab 1</Tabs.Tab>
    <Tabs.Tab id="tab2">Tab 2</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel id="tab1">Panel 1</Tabs.Panel>
  <Tabs.Panel id="tab2">Panel 2</Tabs.Panel>
</Tabs>

After:

import { Tabs, TabList, Tab, TabPanel } from "@heroui/react"

<Tabs>
  <TabList>
    <Tab id="tab1">Tab 1</Tab>
    <Tab id="tab2">Tab 2</Tab>
  </TabList>
  <TabPanel id="tab1">Panel 1</TabPanel>
  <TabPanel id="tab2">Panel 2</TabPanel>
</Tabs>

Complete Migration Reference

Migration Steps

1. Update all imports to include the necessary component parts:

   // Before
   import { Card } from "@heroui/react"
   
   // After
   import { Card, CardHeader, CardTitle, CardContent } from "@heroui/react"

2. Replace all dot notation with the corresponding named component:

   // Before
   <Card.Header>
   
   // After
   <CardHeader>

3. Update TypeScript types if you're importing them separately:

   import type {
     CardProps,
     CardHeaderProps,
     CardTitleProps,
     // ... other types
   } from "@heroui/react"

Automated Migration

For large codebases, you can use find-and-replace with regular expressions:

# Example for Card component
sed -i 's/Card\.Header/CardHeader/g' **/*.tsx
sed -i 's/Card\.Title/CardTitle/g' **/*.tsx
sed -i 's/Card\.Description/CardDescription/g' **/*.tsx
sed -i 's/Card\.Content/CardContent/g' **/*.tsx
sed -i 's/Card\.Footer/CardFooter/g' **/*.tsx

Documentation Updates

All documentation has been updated to reflect the new import patterns:

• Component documentation now shows named exports
• Code examples use the new syntax
• API references have been updated
• Handbook and design principles reflect the changes

TypeScript Support

All component exports maintain their TypeScript types with improved individual type definitions:

// All props types are still exported and now more granular
import type {
  AccordionProps,
  AccordionItemProps,
  AccordionHeadingProps,
  AccordionTriggerProps,
  AccordionIndicatorProps,
  AccordionPanelProps,
  AccordionBodyProps,
} from "@heroui/react"

Need Help?

If you encounter any issues during migration:

1. Ensure all component parts are imported
2. Verify no dot notation remains in your code
3. Check that component names match the new pattern
4. Review the full migration guide
5. Report issues at: GitHub Issues

Links

• Full Migration Guide
• React Server Components Documentation
• GitHub PR

Contributors

Thanks to everyone who contributed to this release and helped with the migration to React Server Components compatibility!