To use Subframe components in your app, you will need to sync them to your codebase. This will create a local copy of the code for your Subframe components. You can then use the Subframe CLI to update the component code whenever you add or change components in Subframe.

Sync goes one way from Subframe to your codebase. This means that if you make changes to a Subframe component’s code in your codebase, those changes will be overwritten the next time you sync.

​
Running the sync command

Make sure to first install Subframe. To sync the code for all of your components to your codebase run the following command:

npx @subframe/cli@latest sync --all

You can also provide arguments to the command to sync only specific components, all components, and to directly install all necessary dependencies:

Arguments:
  components                   the components to sync

Options:
  -a, --all                    sync all components
  -p, --projectId <projectId>  project id to run sync with
  -i, --install                install dependencies after syncing
  -h, --help                   display help for command

For example, to only sync the <Alert /> and <Accordion /> components, you can run:

npx @subframe/cli@latest sync Alert Accordion

​
Disabling sync

If you make changes to a Subframe component’s code in your codebase, those changes will be overwritten the next time you sync. To prevent your changes from being overwritten, you can disable syncing the component by adding // @subframe/sync-disable anywhere in the component file.

src/ui/Accordion.tsx
// @subframe/sync-disable

"use client";
/*
 * Documentation:
 * Accordion — https://app.subframe.com/library?component=Accordion_d2e81e20-863a-4027-826a-991d8910efd9
 */

...

Disabling sync should be used as a last resort when you need to change the core behavior of a component.

See our best practices for when to disable sync.