Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.

Adding a Component Container in DSM

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

To 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.

Learn something new

Craft for design

With Craft designers can speed up their design workflow in Sketch. You can use Craft tools to quickly populate your designs, prototype, and sync design files to InVision.

Learn Craft

Intro to Design System Manager

Learn about InVision DSM, the design system platform for collaborative teams. Find the plan that's right for you and your team and set up your DSM organization.

Learn DSM

Getting started with InVision Enterprise V7

InVision Enterprise provides a connected workflow that brings together the tools, people and processes needed to build great digital experiences at scale.

Learn InVision V7

Organization setup and team management

Let’s get your organization set up right. You can modify account settings, and integrate with the tools your team already uses. Then invite your team and set permissions.

Learn setup & management

Image of Craft Logo