Composition

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

Pro components use the same compound component pattern:

import { Sheet } from "@blakeui-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.