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

[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.