CLI

You're able to install Draft UI components from the command line thanks to an awesome project by Jacob Paris, @sly-cli/sly.

Run the following code to add Draft UI to your project. sly will show you a list of components available to download.

npx @sly-cli/sly add draft-ui

@sly-cli/sly let's you configure some specific settings about how you want to install components from the CLI. Assuming you've followed the initial Draft UI installation instructions, this is what your sly.json should look like.

{
  "$schema": "https://sly-cli.fly.dev/registry/config.json",
  "libraries": [
    {
      "name": "draft-ui",
      "directory": "./components",
      "transformers": ["transform-sly-install.ts"], // optional, otherwise leave empty
      "postinstall": [],
    }
  ]
}

Of course, if you've made your own customizations, you should update your sly.json to match those changes.

sly also allows you to manipulate how you install your components via transformers.

In order to use transformers, you'll need to install sly into your project:

npm install -D @sly-cli/sly

For example, if you're using a different path alias for your directories, overwrite the default values automatically.

const cvaConfig = '@/lib/cva.config'
 
/**
 * @type {import('@sly-cli/sly/dist').Transformer}
 */
export default async function transformSlyInstall(input: string) {
  input = input.replace('@/lib/cva.config', cvaConfig)
 
  return input
}

For additional information on tranformers, go to the @sly-cli/sly repo.