382 ready-made layouts assembled from the kit's own components. This page is about working with them: what an instance lets you change, what forces a detach...
382 ready-made layouts assembled from the kit's own components. This page is about working with them: what an instance lets you change, what forces a detach, and where the seams are.
A block is a published component whose insides are real instances of the components you already have. Dropping one in keeps it linked, and so does everything within it.
Counted in the file: Log in / 01 Simple holds 16 kit instances - four Buttons, three Tabs triggers, two Fields, two Inputs, a Tabs strip, a Checkbox and three Typography styles. Email / 01 holds 18, including the shared header and footer. Each keeps its variant properties, so a Tabs trigger inside a block still reports Variant, Active, State and Show Icon.
That is the practical difference from a flattened mockup: switching a state is a dropdown rather than a redraw, and a change to a main reaches every block that uses it.
Penpot allows overrides but not restructuring. Tested against the file rather than assumed:
When you genuinely need a different structure, detach. The block becomes ordinary layers, you can build freely, and the link to the main is gone. That is the trade, and it is worth making late rather than early.
Auth screens, 404 and banners ship at 1440 and 390, drawn separately rather than one layout that reflows. Emails are 640 and 390. They are siblings, not breakpoints of one thing, so a change to the desktop version does not reach the mobile one. Edit both, or pick the one you need and leave the other.
Every colour, radius and text style in a block is bound to a token, so applying a brand moves all of it at once. Two sections are deliberate exceptions:
Image areas are Aspect Ratio placeholders in base.muted, sized to the ratio the layout wants. Drop your own image into one and the surrounding layout does not move.
Open one and you will find boards that carry no pixels: content, head, form, field, actions. They hold the layout, which is why the spacing survives when a label gets longer.
That is also where to grab. Select form to move a whole group of fields; select the Input inside it to change one. Buttons carry a leftIcon and rightIcon switched off by default, so an icon is a toggle rather than an insertion - which matters, since inserting one is the thing a copy refuses.
Log in and Sign up appear twice in the file: as blocks here, and as full pages under Website pages. They are the same 37 designs, built twice for two jobs - the block is the piece you drop into a screen you are already building, the page is the finished thing with the site's own header and footer.
So the count of 382 components is honest, but it is not 382 distinct designs. If you only need the form, take the block.
Everything is named Section / NN Description - Log in / 12 Split quote, Email / 04 Simple verification - and the number is the order on the page. Responsive layouts add · Mobile to the 390 sibling. Searching the layer tree for the section name lists the whole set in order.