Add code, not dependencies

Run this command and two svg icons will appear in your codebase immediately.

> npx @sly-cli/sly add @radix-ui/icons camera card-stack --yes --directory ./svg-icons

⠸ Adding camera...
✔ Added /svg-icons/camera.svg

⠸ Adding card-stack...
✔ Added /svg-icons/card-stack.svg

Sly is a CLI tool to add components, icons, and utilities as code, not dependencies.

With one command, or through an interactive prompt, you can choose a component from Sly's registry and it will appear in your codebase, in exactly the format it would be if you had written it yourself.

• Automatically customize each component with transformers.
• Write postinstall scripts that run each time you add a component.
• Only source code, no minified bundle output. code.
• Prevent supply chain attacks by detaching from automatic updates.
• Host your own registry and share code across your organization.

Joyously interactive

If you don't provide any flags to the CLI, Sly will walk you through choosing which libraries and components you want to add

> npx @sly-cli/sly add

✔ Which library would you like to use? › @radix-ui/icons
✔ Which components would you like to add? › camera, card-stack
✔ Add 2 components? … yes

⠸ Adding camera...
✔ Added /svg-icons/camera.svg

⠸ Adding card-stack...
✔ Added /svg-icons/card-stack.svg

Icon libraries

Sly can add SVG files to your project, and automatically kick off a postinstall script that generates an SVG spritesheet and updates the types for your Icon component.

• @blueprintjs/icons
• tailwindlabs/heroicons
• lucide-icons
• iconoir
• @radix-ui/icons
• simple-icons
• tabler-icons
• material-design-icons

UI component libraries

Use Sly to add UI components into your codebase, then run transformer functions on each to customize their colors, import paths, and more.

• draft-ui
• jolly-ui
• @shadcn/ui

Used by

Generously configurable

You can configure each library individually, either via the CLI or by editing the config file directly.

{
  "$schema": "https://sly-cli.fly.dev/registry/config.json",
  "libraries": [
    {
      "name": "@radix-ui/icons",
      "directory": "./svg-icons",
      "postinstall": ["npm" "run" "build:icons"],
      "transformers": [
        "sly/svg-remove-dimensions.ts",
        "sly/html-prettier.ts",
        "sly/html-add-license-info.js",
      ]
    }
  ]
}

Before a new component is saved, Sly processes it through a pipeline of transformer functions that you can include.

For example, you could use a transformer to:

• enforce opinionated formatting preferences
• replace imported util functions with the path to your own utils folder,
• to remove attributes from SVGs,
• modify colors to match your brand

Instructions in reverse

Sly does not require a config file IF you provide enough information in the command, so instead of telling you what each option does, let's go through what happens if you don’t include each option

As an example, we'll install eraser icon from@radix-ui/icons.

--overwrite

> npx @sly-cli/sly add @radix-ui/icons eraser --directory ./icons --overwrite --yes

If you don't provide --overwrite, the installation will fail if the file already exists.

--yes

> npx @sly-cli/sly add @radix-ui/icons eraser --directory ./icons --yes

If you don't provide --yes, you will be prompted to confirm the installation before a file is written.

--directory

> npx @sly-cli/sly add @radix-ui/icons eraser --directory ./icons

If you don't provide --directory, Sly will look for your sly.jsonfile and look for the directory field under @radix-ui/icons in the config. **If Sly can't find that config file, you will be asked which directory you want to install the icon to** and Sly will create asly.json file for you.

component

> npx @sly-cli/sly add @radix-ui/icons eraser

If you don't provide a component name like eraser, **Sly will show you a list of all the icons available** in @radix-ui/icons and ask you to select the ones you want.

library

> npx @sly-cli/sly add @radix-ui/icons

If you don't provide @radix-ui/icons, Sly will show you a list of all the libraries you've configured and ask you to select the one you want before proceeding to show you the list of icons.

add

> npx @sly-cli/sly add

If you don't provide add, you're at the root of the CLI and will get a help menu

npx @sly-cli/sly

> npx @sly-cli/sly

If you don't provide @sly-cli/sly, it might be because you've installed Sly already and you can just run sly directly.

Shamelessly open source

Sly is free and open source.

If you have your own proprietary component library, you can host your own registry and share code across your organization using Sly

Get started

Add Sly to your project and

> npm i --save-dev @sly-cli/sly

> npx sly add

made    with    ❤️ by @jacobmparis