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)

[DenserMeerkat]

PowerShell version of the same command

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

[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

[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