Component Folders

Component folders allow teams to better organize their Ditto components and ensure any component you need can be easily found (both within the component library in Ditto and within your projects!)

With component folders, teams can now organize their components with four levels of nesting, making it quick to search for, use, and edit components.

👉 Note: Component folders are available for teams on Ditto's Growth and Enterprise Plans.

Creating a component folder

To create a component folder, head over to your team’s component library. There, you’ll see the option to create a new component folder:

You can create as many folders as you’d like!

👉 Quick tip: Moving components into folders won't change their name or ID, and uniqueness for components will still be enforced across the entire component library!

Moving components into folders

Components can be moved into component folders in several ways!

You can create components directly within folders:

You can also move existing components into a folder:

You can also add components to new folders directly from your Ditto projects. To do so, select the “create and attach Ditto component” option from the Edit panel:

In addition to organizing components within folders, you can also always group components within component folders. This can be done either by changing the component’s name or by dragging it into another group.

Attaching components in projects

If you’re using component folders, within your Ditto projects, you’ll be able to search for components either within a specific folder or across all folders.

After selecting “create or attach component,” you can select the folder you’d like to search within. Then, you can search for the component’s name.

Component suggestions can also be filtered by folder- you can now filter Attach suggestions by folder, if you choose:

Tips for using component folders

Component folders can help you keep components separated, so it’s easy to make sure you’re using exactly the component you need.

For example, it could be helpful to use component folders to:

  • Separate components by product area (for example, an “Onboarding” folder)
  • Separate the components used by different teams
  • Store components with the same function together (i.e. a “CTAs” folder)
  • Store the components for a particular project

Didn't find what you were looking for?
Contact Support