Adding a Component Container in DSM
  • 03 Feb 2023
  • 1 Minute to read
  • Dark

Adding a Component Container in DSM

  • Dark

Article Summary

The Live Components feature is currently limited to Enterprise users on a DSM Enterprise plan. Learn more about DSM Enterprise. 

DSM component containers help you group multiple component implementations across design and development. This allows you to create centralized component documentation and ensure different implementations are in sync.

For example, you can use a component container to group multiple design assets—i.e., Sketch symbols—that represent component variants. You can also add a React coded component to the same component container, and the DSM documentation site will present the design and code side by side.

Creating a component container

If you are working in a legacy DSM library, the process for creating a component container will differ. Learn how to create a component container in a legacy DSM library.

Creating a component container is as simple as creating a component page in your DSM documentation site. These pages can be at the Component category level, or they can be nested within a folder.

To create a component page:

  1. Sign in to the DSM documentation site and open your design system.
  2. At the top of the page, click Components.
  3. In the left-hand navigation, select (or create) a category or folder.
  4. Within the category or folder, click Add Page.
  5. Name the page and press Enter.

You've now created a component page, which serves as a component container. 

There are typically multiple design instances of the same coded component in a UI toolkit, representing different component variants (for example, a button might have a hover state and a click state). Component pages enable you to easily group multiple instances of one component.

Adding a Storybook tab

NoteTo integrate a self-hosted Storybook instance with DSM, check out this article instead: Embedding Storybook in DSM via URL

If you're using the CLI-based DSM Storybook integration, the next step is to create a DSM-hosted Storybook tab.

To add a DSM-hosted Storybook tab:

  1. Open your DSM documentation site and navigate to the chosen component page.
  2. Beneath the component name, click Add tab.
  3. Select Storybook, and then select the appropriate framework (React, Vue, Angular, or HTML).

You can now begin connecting the Storybook story to its component container in DSM.

Was this article helpful?