Components

Components let you turn any element or group of elements into a reusable building block. Edit the component once and every instance across your design updates at the same time, keeping your project consistent and easy to maintain.

Component Types

Regular Elements

Regular elements are displayed with a blue bounding box. They are standalone and independent — editing one has no effect on any other element in your design.

Reusable Components

Reusable components are displayed with a purple / magenta bounding box. Any change you make to a reusable component is propagated to every instance of that component throughout your project.

Creating a Component

To turn an element into a reusable component:

1. Select the element you want to convert.
2. Press Cmd + Option + K on macOS, or Ctrl + Alt + K on Windows / Linux.
3. Deselect the element, then reselect it. You will see the bounding box change from blue to purple, confirming it is now a reusable component.

Why Use Components

• Consistency — every instance shares the same structure and styling, so your UI stays uniform.
• Update all instances at once — change a component's padding, color, or layout and every instance reflects the change immediately.
• Build design systems — compose components into a library of buttons, cards, navigation bars, and more that your whole team can reuse.
• Sync with code components — Pencil components map directly to your React, Vue, or Svelte components, keeping design and implementation aligned.

Last updated: February 22, 2026