Composition | HeroUI Pro

HeroUI Pro components follow the exact same composition patterns as HeroUI OSS — compound components with dot notation, the render prop for custom elements, and framework-agnostic styles via @heroui/styles.

Read the full Composition guide on heroui.com to learn about compound components, polymorphic rendering, the render prop, and framework-agnostic styling.

Pro components use the same compound component pattern:

import { Sheet } from '@heroui-pro/react';

<Sheet>
  <Sheet.Trigger>
    <Button>Open Sheet</Button>
  </Sheet.Trigger>
  <Sheet.Backdrop />
  <Sheet.Content>
    <Sheet.Dialog>
      <Sheet.Header>
        <Sheet.Heading>Title</Sheet.Heading>
      </Sheet.Header>
      <Sheet.Body>Content here</Sheet.Body>
      <Sheet.Footer>
        <Button>Save</Button>
      </Sheet.Footer>
    </Sheet.Dialog>
  </Sheet.Content>
</Sheet>

And the same render prop for custom elements:

import { m } from 'motion/react';

<Sheet.Content render={<m.div animate={{ opacity: 1 }} />}>
  {/* ... */}
</Sheet.Content>

See each component's documentation for the full compound component anatomy.