Components & variants

Components are reusable pieces of UI. In Shippp a component has a main component on the canvas — a grid that shows every variant — and instances you place in screens. Each component exports as a typed React component whose properties become props.

Create a component

1. Design it with smart layout

   Build the element on the canvas first. Use smart layout and tokens — a component is only as flexible as its layout.

2. Create the component

   Right-click it and choose Create Component. The main component stays on the canvas, on the page where you made it, and appears in the component library.

3. Name it

   Rename it (⌘ R) with a clear, code-friendly name such as Button or Pricing card.

Main components can live on any page. Keep them together on a page of their own if you like — cut and paste (⌘ X, ⌘ V) moves a main component to another page.

The variant grid

A main component is shown on the canvas as a grid of every combination of its properties, with a dashed purple frame. Select it to see Properties in the inspector, and select a single cell to design that variant.

Properties

Click + (Add property) in the Properties section and choose a type:

• Every property can have a default value and a description.
• Text, instance swap and slot properties can be created first and bound to a layer later: select the layer and apply the property there.
• Use Edit property or Delete property on a row to reshape it.
• With nested instances inside, Expose properties from → Nested instances shows their properties on the parent component, so designers set them in one place.
• Turn on Icon property on an icon layer to swap the icon per instance, from the icon catalog or your components.

Slots

Select the slot layer to set it up:

A slot keeps its default content, and every instance can be reset to it.

Responsive components

Use Turn responsive on to add a Breakpoint property. You can then adjust the component per breakpoint — a navigation bar that collapses on Mobile, a card that stacks on Tablet.

Interaction states

Hover, focus and disabled are special properties: Shippp keeps their names so they export as real interaction states (for example _hover) rather than ordinary variants.

The component library

With nothing selected, open the Assets tab in the right panel and choose Components. The library lists every component by page, with previews and Search components…. The settings button filters by page.

• Drag a component onto the canvas to place an instance of its default variant — into a frame, into a smart layout or onto the empty canvas.
• Click a component, then click on the canvas to place it.
• Right-click a component for Insert instance, Go to main component, Remove from canvas and Delete permanently…

Use instances

• Pick variant and property values for an instance in the Instance section of the inspector.
• Changes you make on an instance are overrides, marked with an orange dot on the section. Click the dot to reset that section, or use Reset to main component.
• Go to main component jumps to the definition. Detach instance (Eject Instance in the right-click menu) turns it back into ordinary layers.
• Actions work on several selected instances at once.

Copying components

What developers get

Every component exports as a React component built on a recipe. Properties become props, layer names become slots, and tokens stay tokens. Here is the button used in this site's header, as exported from Shippp:

export interface Container8RootProps extends HTMLChakraProps<"div"> {
  variant?: "default" | "value-2";
  property2?: "default" | "value-2";
}

export const Container8Root = withProvider<HTMLDivElement, Container8RootProps>("div", "root");
export const Container8Text = withContext<HTMLParagraphElement, Container8TextProps>("p", "text");

Every exported project also includes a generated Storybook with a story for each variant, state, breakpoint and swap of your components — so developers and QA review exactly what you designed.

Checklist for a production-ready component