A key advantage of Shaper is the ability to turn your designs into reusable components. Rather than duplicating similar elements across pages (and risking inconsistencies), you can create a component once and reuse it everywhere, making global updates a breeze.

Creating a Component: To convert a set of elements into a component, select the elements (or a container with its child elements) and look for the “Create Component” option (either from a right-click context menu or a button in the top toolbar). For example, if you’ve designed a card with an image, title, and description, you can group those and create a “Card” component. Give the component a clear name. Shaper will encapsulate those elements into a single component layer in the Layer Tree.

Once a component is created, it behaves like a master/template:

  • Editing Components: Double-clicking a component instance on the canvas (or selecting “Edit Component” from its context menu) will take you into the component edit mode. In this mode, you can modify the component’s internal layout or styles. All changes will propagate to every instance of that component throughout your project – since in reality, Shaper is updating the underlying React component code.
  • Overrides and Properties: If your component is designed to be flexible (say a Button component where the label can change per instance), you can expose certain properties. In Shaper, this might involve defining which text or images are editable for each instance. For instance, you might have a “Card” component where the image and text are placeholders that can be overridden. In the property panel, when an instance is selected, you’d see fields to change those props (like setting the label of a Button or swapping the image in a Card). This corresponds to React component props in code.

Reusing Components: Once defined, your components appear in the Components library (often accessible via the Add menu or a library sidebar). You can drag and drop additional instances of any component onto any page. This not only saves time but ensures consistency. If you update the master component, all instances update automatically.

Shaper also supports bringing in components from your codebase or design system:

  • If your project is connected to a GitHub repo with existing React components (like a design system library, or Storybook stories for components), Shaper can import those so you can use them visually. For example, if you have a <Navbar> component in code, Shaper might list it in the Add Component panel, allowing designers to drag it onto a page and configure its props from the UI.
  • Shaper has integration with shadcn/ui and other libraries: these appear in the component library with pre-defined variants and are fully editable via the property panel (thanks to metadata from Storybook or the library).

Best Practice: Organize components in a logical hierarchy (e.g., Buttons, Form Inputs, Cards, Layout sections). Encourage your team to use these components instead of creating new variations – it keeps the design consistent and the code DRY (Don’t Repeat Yourself). If you find you’re copying a UI pattern in multiple places, it’s probably a candidate to make into a component!