Nested components

Detecting nested components

If parts of an imported component contain a matching variant from another already-imported component, story.to.design will detect and place the nested component.

How to use it

  1. Understand which components are the most atomic, and that might be used inside other components.

  2. When starting the import process, make sure you import these atomic components first.

  3. Once the atomic ones are placed on the canvas, when the other subsequent components are imported and placed on the canvas, the plugin will make the connection.

E.g: An icon component should be imported first, then the button which contains that icon, so story.to.design can link to the icon component.

Demo

Compatibility

Currently, nested component detection only works with the following component-based web technologies:

  • React
  • Vue
  • Svelte
  • Web Components

If you need support for another framework, let us know in our Discord chat or send an email to hello@to.design.