Here's the idea. I will have a "top level" component, say for example Table. Table may be implemented as follows:

export type TableProps<T extends ElementType = "table"> = PropsWithAs<T> & {
  readonly variant?: "default" | "pivot" | "condensed";
}

export default function Table<T extends ElementType = "table">({ as, className, variant = "default", ...props }: TableProps<T>) {
  const Container = as ?? "table";
  return <Container {...props} className={variants({ variant })} />
}

The problem is, under this I have a bunch of components that may or may not be there, which I would generally use react context for. i.e.,

<Table variant="pivot">
  <TableHeader>
    <TableRow>
      <TableHeaderColumn>Ticker</TableHeaderColumn>
      <TableHeaderColumn>Last Trade</TableHeaderColumn>
    </TableRow>
  </TableHeader>
  <TableBody>
    {/** ... you get the rest */}
  </TableBody>
</Table>

So say for example I wanted TableBody to receive the variant prop without it being explicitly passed in. The only way I can find to do this is kind of ugly and unreliable:

export default function Table<T extends ElementType = "table">({ as, className, variant = "default", children, ...props }: TableProps<T>) {
  const Container = as ?? "table";
  return (
    <Container {...props} className={variants({ variant })}>
      {Children.map(children, (child) => {
        if (!isValidElement(child)) {
          return null;
        }
        if (child.type === TableBody) {
          return cloneElement(child, { variant });
        }
        return child;
      })}
    </Container>
  );
}

There must be a better way while still supporting SSR, right?