shadcn diff

​

Usage

shadcn diff [component]

​

Arguments

​

Options

​

Examples

​

Check all components for updates

shadcn diff

The following components have updates available:
- button
  - components/ui/button.tsx
- card
  - components/ui/card.tsx

Run diff <component> to see the changes.

​

Check a specific component

shadcn diff button

- components/ui/button.tsx
- import * as React from "react"
+ import { forwardRef } from "react"
  import { Slot } from "@radix-ui/react-slot"
  import { cva, type VariantProps } from "class-variance-authority"
  
  import { cn } from "@/lib/utils"
  
- const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
    ({ className, variant, size, asChild = false, ...props }, ref) => {
      const Comp = asChild ? Slot : "button"

​

Check component in specific directory

shadcn diff button --cwd ./my-project

​

What it does

1. Reads your components.json configuration
2. Fetches the latest version from the registry
3. Compares local files with registry versions
4. Shows a line-by-line diff of changes
5. Highlights additions in green and removals in red

​

Use cases

​

Track component updates

shadcn diff

​

Review changes before updating

shadcn diff button

​

Verify customizations

shadcn diff card

​

Output format

• Lines starting with - (red) are removed in the registry version
• Lines starting with + (green) are added in the registry version
• Lines without prefix are unchanged

​

No updates found

No updates found for button.

No updates found.

​

Notes

• The diff compares the transformed registry code against your local files
• Transformations are applied based on your components.json configuration
• Only checks components that exist in your project
• Requires a valid components.json file