This guide provides instructions for configuring assistant-ui to work with React 18.
React 18#
If you're using React 18, you need to update the shadcn/ui components to work with forwardRef. Specifically, you need to modify the Button component.
Updating the Button Component#
Navigate to your button component file (typically /components/ui/button.tsx) and wrap the Button component with forwardRef:
// Before
function Button({
className,
variant,
size,
asChild = false,
...props
}: React.ComponentProps<"button"> &
VariantProps<typeof buttonVariants> & {
asChild?: boolean;
}) {
const Comp = asChild ? Slot : "button";
return (
<Comp
data-slot="button"
className={cn(buttonVariants({ variant, size, className }))}
{...props}
/>
);
}
// After
const Button = React.forwardRef<
HTMLButtonElement,
React.ComponentProps<"button"> &
VariantProps<typeof buttonVariants> & {
asChild?: boolean;
}
>(({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button";
return (
<Comp
data-slot="button"
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
);
});
Button.displayName = "Button";
Additional Resources#
If you encounter any issues with React compatibility, please:
- Check that all required dependencies are installed
- Ensure your component modifications are correctly implemented
- Join our Discord community for direct support