Components

1Create a component

Select a layer and press Cmd+Alt+K, or right-click and choose Create Component.

2Instances and overrides

Change the text, colour or any property inside an instance; the change stays on that instance, however deep the layer is nested. The panel offers Swap component, Go to component, Reset override and Detach.

3UI kits

The Components tab (Cmd+Shift+K) browses kits by Buttons, Inputs, Cards, Nav, Layout, Feedback, Data and Other. It ships with six starter components and 31 shadcn components: buttons, cards, inputs, selects, checkboxes, toggles, sliders, tabs, breadcrumbs, pagination, dialogs, menus, toasts, tooltips, alerts, avatars, badges, progress bars, skeletons and tables.

Import kit and Export kit share kits as .de files.

4Linked libraries

Link another .de or .pen file as a library to use its components here. The app watches the file and picks up changes; Reload forces it. A library shows as Not loaded, Missing or Can't read when something is wrong.