composite-components

Define each part as a prefixed component like FooRoot or FooTrigger, set dotted displayName values such as 'Foo.Root', then assemble them into a namespace object literal exported as Foo. Wrap Radix primitives with forwardRef or use slottable() for plain elements.

Use slottable() or composable() when the part renders a plain DXOS element like a div and needs asChild support. Use forwardRef when the part wraps a @radix-ui/react-* primitive that already provides ref forwarding and ARIA wiring. Never mix both styles within a single part.

Annotating an alias like const FooTrigger: FunctionComponent<Props> = FooPrimitive.Trigger strips the forwardRef type information from the primitive. Let the alias inherit the primitive's type directly so consumers retain ref support.

ClassNames flow through the tx() theme function as tx('foo.part', variants, classNames), with tokens defined in a sibling Foo.theme.ts file. For slottable parts, composableProps reconciles consumer classNames with any className injected by a parent Slot.

Prefer createContext from @radix-ui/react-context for typed Provider and useContext tuples with part-name error messages. Use createContextScope only when the composite must nest inside another scoped composite, such as Popover inside DropdownMenu.