Updating Components

electron-shadcn includes a convenient script to update all your shadcn/ui components at once. This ensures you always have the latest versions with bug fixes and improvements.

Why Update Components?

Since shadcn/ui components are copied into your project (not installed as dependencies), they won't automatically update when new versions are released. Regular updates give you:

• Bug fixes: Resolved issues and improved stability
• New features: Enhanced functionality and variants
• Accessibility improvements: Better ARIA attributes and keyboard navigation
• Performance optimizations: Faster rendering and reduced bundle size

Updating All Components

The easiest way to update all components is using the bump-ui script:

npm run bump-ui

This script will:

1. Scan your src/components/ui directory
2. Identify all installed shadcn/ui components
3. Reinstall each component with the latest version
4. Overwrite existing files with the -o flag

How It Works

The script automatically detects all .tsx files in your components directory and updates them:

# Equivalent to running:
npx shadcn@latest add -y -o button card dialog dropdown-menu ...

The flags used are:

• -y: Automatically confirm the installation
• -o: Overwrite existing files

Updating Specific Components

If you only want to update specific components, you can do it manually:

npx shadcn@latest add -o <component-name>

For example, to update just the Button component:

npx shadcn@latest add -o button

Updating Multiple Specific Components

npx shadcn@latest add -o button card dialog

Custom Component Directory

If you've configured a custom path for your UI components, you can pass it to the script:

npm run bump-ui src/custom/ui/path

The script will look for components in the specified directory instead of the default src/components/ui.

Best Practices

git add .
git commit -m "Save work before updating components"

# Create a backup of customized components
cp src/components/ui/button.tsx src/components/ui/button.backup.tsx

npm run bump-ui

git diff src/components/ui

// Restore your custom variants or modifications
const buttonVariants = cva(
  "inline-flex items-center justify-center...",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        // Your custom variant
        brand: "bg-blue-600 text-white hover:bg-blue-700",
      },
    },
  }
);

npm run test
npm run start

Checking for Updates

To check if updates are available, visit the shadcn/ui changelog or the component pages on the shadcn/ui website.