[]previous and next page

Porting components

Every port below keeps the shadcn structure (same file name, same exported names, same class strings) and changes only what is React-specific.

For agentsUpdated

Every port below keeps the shadcn structure (same file name, same exported names, same class strings) and changes only what is React-specific. The recipe, used by every component:

  1. React.forwardRef is gone. A ShadowJS component is a plain function of props; props.ref is a callback ref.
  2. className becomes class. Merge the component's classes with the caller's through mergeElementProps: classes from both sources are kept, style objects merge, handlers all run (the caller's first), refs all fire.
  3. asChild becomes as: a tag name or a component. The primitive renders it with the merged props.
  4. ...props stays {...merged} or {...rest}. Never destructure props in the signature of a library component: splitProps keeps reactivity (applications can rely on the compiler's forgiving reactivity; library code should not).
  5. Radix parts become the same-named parts of @shadow-js/primitives.