Selling shadcn component kits on Moatless

Not a software engineer? You don't really have to know this stuff! Your agent can figure out how to integrate the things you buy, and can help you with what makes sense for you to buy. This is for those who put code up for sale or for those who want to know how it works under the hood.

A lot of people already sell UI components as source code. In the shadcn and Tailwind world, that's how people expect to get them: you run npx shadcn add, the component's files land in your project, and from then on they're yours to restyle and change.

Moatless now works the same way. If your codebase is a shadcn component kit, buyers can install its components into their own projects with the shadcn CLI, straight from Moatless, signed in with their Moatless API key. They can still clone the whole kit with git, like any other listing.

For sellers

You need three things: a kit with a registry.json, a switch on your listing, and a release.

1. A registry.json at the root of your repository. It's the file shadcn build reads, listing each component and its files. If you already publish a shadcn registry somewhere, you already have one. Each component's files have to be in what you ship, so check that your .moatlessignore doesn't leave any out.

2. Turn it on for your listing. On your listing's page under Sell, open Advanced and check Install components with the shadcn CLI. It's off by default, and buyers can always clone the code whether it's on or not.

3. Publish a release. When Moatless builds it, it reads your registry.json and checks that every file it lists is there. Your listing's page then shows each component, with the instructions for installing it. If something's wrong, like a file that's listed but missing, the release isn't published, and you get an email (and a note on your listing's page) saying exactly what to fix.

A few things worth knowing:

• Components that use each other. If one of your components depends on another in the same kit, list it in registryDependencies by its name, or by the URL you serve it at elsewhere. Moatless points it at your registry on Moatless, so the CLI fetches it from there with the buyer's key. Dependencies on shadcn/ui's own components, like button, work as they always do.
• Pricing. You sell the kit as a whole, with a one-time price, and optionally a subscription for updates. As with every listing on Moatless, subscribers are only charged for the months in which you publish a release.
• Your agent can set it up. The Moatless skill knows about this setting, so your coding agent can turn it on when it creates the listing, and tell you why a release failed if one does.

For buyers

Once you've bought a kit, installing its components takes a minute.

1. Create an API key in your Moatless settings.

2. Add the kit's registry to your project's components.json. The listing's page has the exact block to copy. It looks like this, with the kit's own address and name:

{
  "registries": {
    "@pricing-kit": {
      "url": "https://moatless.store/r/acme/pricing-kit/{name}.json",
      "headers": { "Authorization": "Bearer ${MOATLESS_API_KEY}" }
    }
  }
}

3. Install a component:

export MOATLESS_API_KEY=<your key>
npx shadcn add @pricing-kit/pricing-table

The CLI installs the component's files, the npm packages it needs, and any other components it uses, whether they're from the same kit or from shadcn/ui. Your coding agent can run the same command for you.

Updates. You get the newest release you're entitled to: every release if you subscribe, or up to the one you bought if you don't. Running npx shadcn add again gets the newer version of a component, but it replaces the files in your project, so any changes you've made to them are overwritten. If you've customized a component a lot and want to merge updates into your changes, clone the kit with git instead, which merges new releases like any other upstream change.

Happy Hacking!

• Zach