Need easy way to update components

[pdeva]

Currently when I want to upgrade my components, i have to manually make a list of all my existing components and add command one by one for each one.

ideally the components themselves should be part of components.json file and a single command like update would update them to the latest version. i also think theme should be added to the config file too to allow easy experimentation with swtiching themes.

[beorn]

This adds/installs (and overwrites if existing) all shadcn components: npx shadcn-ui@latest add -a -y -o

[bryanlundberg]

Newest versions renamed the command to: npx shadcn@latest add -a -y -o

[remi2257]

You can use the following command line to update only installed components !
for file in components/ui/*.tsx; do npx shadcn-ui@latest add -y -o $(basename "$file" .tsx); done

Note: it can conflict a bit with components like Toast (one installation for multiple components)

[javaniecampbell]

This works great just an update, just remember to add semi-colons in the foreach:

Those using without src/ directory

Get-ChildItem -Path components/ui/ -Filter *.tsx | ForEach-Object { $baseName = [System.IO.Path]::GetFileNameWithoutExtension($_.Name); npx shadcn-ui@latest add -y -o $baseName; }

For those using src/ directory

Get-ChildItem -Path src/components/ui/ -Filter *.tsx | ForEach-Object { $baseName = [System.IO.Path]::GetFileNameWithoutExtension($_.Name); npx shadcn-ui@latest add -y -o $baseName; }

@DenserMeerkat Thank you for the script, this is my thanks & contribution to that with gratitude.

[borgogelli]

You can use the following command line to update only installed components ! for file in components/ui/*.tsx; do npx shadcn-ui@latest add -y -o $(basename "$file" .tsx); done

Note: it can conflict a bit with components like Toast (one installation for multiple components)

@remi2257 , please could you explain better what does "one installation for multiple components" means ?

[hughlv]

One note: This command should be run under project root, so if there is src/ folder, you should add 'src/' to the command:

for file in src/components/ui/*.tsx; do npx shadcn-ui@latest add -y -o $(basename "$file" .tsx); done

[feedm3]

with pnpm and the new shadcn package name:

for file in src/components/ui/*.tsx; do pnpm dlx shadcn@latest add -y -o $(basename "$file" .tsx); done

[pranta-barua007]

You can use the following command line to update only installed components ! for file in components/ui/*.tsx; do npx shadcn-ui@latest add -y -o $(basename "$file" .tsx); done

Note: it can conflict a bit with components like Toast (one installation for multiple components)

is there any way to do so for custom registry?

[yahia-berashish]

I think that can be done by using the shadcn-ui add command then selecting the components you want to add @pdeva

[marcuslindfeldt]

The backstage project has an upgrade helper that I think could be very useful for shadcn to see what has changed between versions. If it was integrated into the docs and on a component level it would be even better.

[Crystal-RainSlide]

Shadcn made a cli command called diff that work like that: https://ui.shadcn.com/docs/changelog#diff-experimental

But it's still experimental and is not working for me. Maybe it can't diff the small updates that happened in-between released verisons yet.

[marcuslindfeldt]

Seems nice but its not exactly the same I think. A lot of people tweak the shadcn components to match their brand and with this cli diff all of those changes will be highlighted as well. But I'm really only interested to see what changed between version a..b

[Crystal-RainSlide]

One more niche problem: shadcn/ui is using the latest main (instead of released versions) for installation. One need to have the exact git commit id of his installation to get a useful diff! :(

---

To make things easier, I tagged every local tweak with comments, and I save the original code in those comments too. Thus my update process is just like a upstream merging.

[lianghx-319]

If we custom styled the built-in components from source code. Is any way to update to latest version and keep our own changed?

[MomentusCritisae]

I'm also very interested in this feature

[AndreaBarghigiani]

There's no way up until now to do that. Just tested with the progress.tsx component and if you ever change something the only option you have when you run pnpm dlx shadcn@latest add progress is to override it.

I'm kinda getting "worried" about this because I see many React.ElementRef deprecation warning around many components and IMO it'll get serious in the future when all components need to get updated.

I've tried to open a discussion about this a while ago, if you feel like participating just comment on that discussion.

[dwolrdcojp]

There's no way up until now to do that. Just tested with the progress.tsx component and if you ever change something the only option you have when you run pnpm dlx shadcn@latest add progress is to override it.

I'm kinda getting "worried" about this because I see many React.ElementRef deprecation warning around many components and IMO it'll get serious in the future when all components need to get updated.

I've tried to open a discussion about this a while ago, if you feel like participating just comment on that discussion.

https://github.com/reactjs/react-codemod#remove-forward-ref

[jmaister]

This is the big problem of copying the code of the componentes into your repository (like shadcn-ui) instead of importing the components from a library (others).

[raythurnvoid]

if you can have have a diff you can ask an LLM to apply the changed required.

You need the diff of you overrides then download the new shadcn stuff and ask Sonnet to re-apply your overrides.

[milon27]

this is really important feature

[realtebo]

So you must

• manually update shadcn
• manually update all dependencies of shadcn
• manually override each and very component?

Please. provide an upgrade command !!!!!!!!!!!

[realtebo]

I just tried

 for file in src/components/ui/*.tsx; do npx shadcn@latest add -y -o $(basename "$file" .tsx); done
✔ Checking registry.
✔ Installing dependencies.
ℹ Skipped 1 files: (files might be identical, use --overwrite to overwrite)
  - src/components/ui/avatar.tsx
...

why the -o flag is ignored? isn't that the flag for overwrite ?

also... isn't a way to use components.json !?

[gvsakhil]

Its very difficult to update components one by one. Looking for a command to do this...

[ghost]

This collects all .tsx filenames (without extension) in src/components/ui/ and passes them as arguments to shadcn add.

 bunx --bun shadcn@latest add $(Get-ChildItem -Path src/components/ui/ -Filter *.tsx | ForEach-Object { [System.IO.Path]::GetFileNameWithoutExtension($_.Name) } | ForEach-Object { $_ }) -y

[benyamynbrkyc]

is there any progress on this?

[ozeebee]

Hi, I'm late to the party, but isn't there already an update command ?
I just ran:

bun x shadcn-svelte@next update --all --yes

and it seems all my existing components were updated.
More info with bun x shadcn-svelte@next update --help

[mehedi-codes]

[fsolarv22]

This is the main reason why I don't use Shadcn; it's great that they're finally considering it. The way things are today, you need maximum agility in everything.

[ppulwey]

Tbh using BaseUI and let AI setting up some styled components based on it is not a big deal anymore. That's what I do for my customers projects now. It would still be nice to be able to use shadcn again in the future.

[ppulwey]

See my comment here: #8359 (comment)

[AlejandroYYWireless]

Now that this is literally in the hands of Vercel, this should be done ASAP. This is insane we dont have this yet.

[MurzNN]

The critical issue with this feature is that we do not store anywhere the information about which exact versions of the Shadcn components were installed in the project, so I created a separate feature request to store this information: #10374

If we store this, we can just launch something like shadcn diff to see which exact components were changed locally by comparing the code with the remote files of the same versions (not like now with the latest versions) and see what exactly were changed and in what concrete components.

So, if you have 100 components, but changed only 1 line in 1 component, this diff will show you only this single component and only this single changed line, not 100500 changes in other components, like it does now.

So, let's upvote the feature request #10374 to simplify the updating process!

[Prajwal-alphanimble]

you might wanna check out this discussion where I implemented a new resizable and dragable dashboard layout... this can be very helpfull to many developers in making analytic, sharable dashboard, the users can alter the dashboard based on their liking...

The disscussion link: #10466

[RobPruzan]

Git already solves all these problems fwiw. Someone could setup a mirror repo for just the components inside the shadcn repo. Then you could initialize a git sub module inside your components folder, and set the mirror repo as the remote. Then anytime there are new updates, you just pull. Anytime there's a conflict, you get a true merge conflict that is compatible with git tooling.