JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
    • 0
  • Score
    100M100P100Q10266F
  • License MIT

Simple CLI to create Shadcn components from project

Package Exports

  • components-differ
  • components-differ/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (components-differ) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ShadCN Project Differ

This CLI tool figures out the difference between the initial commit of a ShadCN project and the current state of the project and creates a new ShadCN JSON output file with the changes. This ShadCN JSON file can then be used with the ShadCN CLI to generate a new project or add to an existing project.

Steps

  1. Create a new NextJS app
  2. Add ShadCN to the app
  3. Create a new initial commit; rm -fr .git && git init && git add . && git commit -m "Initial commit" or npx components-differ --init
  4. Make your updates to the project
  5. Run the CLI tool; npx components-differ

The reason we are recreating the initial commit is so that the resulting JSON output is only the changes to the project after ShadCN was added, and not the entire project history.

You can then take the resulting JSON ouput and host it on a URL, then use that with the ShadCN CLI to generate a new project or add to an existing project.

npx shadcn@latest init http://your-json-output-url

You can use the --src-dir flag if you want to use the src directory in your project.

Or you can add the JSON output to an existing project:

npx shadcn@latest add http://your-json-output-url

Why is this useful?

This allows library maintainers or SaaS services to create a one step installer for their library or service into an existing project, or to bootstrap a new project with the library or service.