How can the customised props be kept after updating components from shadcn

[tcf01]

Overview

• Take button.tsx from shadcn/ui as an example
• I wanna set my custom variant& size style in button.tsx since the default ones don't fit my use case

Struggle

• When running npx shadcn-ui@latest add button, all of my customised variant& size gone

Question

• How can I suppose to set custom variant in the component level and also remain flexible to get updates from shadcn/ui? Thank you!

[rahulpunase]

@tcf01 shadcn/ui is like an wrapper on components, you can always update the button component created in components folder as per your need.

[tcf01]

@rahulpunase Yeah, I have tried that.

Let say I have added sth in my component(See the comment line). However after running npx shadcn-ui@latest add button, myTestingVariant will be gone.

I think it will be hard to manage if we have a lot of shadcn/ui components and we need to diff them manually. Is there any workarounds for this issue

const buttonVariants = cva(
  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        myTestingVariant: 'bg-primary text-primary-foreground hover:bg-primary/90', //this is my custom variant
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive:
          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
        //...
      },
      //...
    },
    //...
  },
)

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[Qavi-Nizamani]

Is there any work around to overcome the issue!