Dashboard / Component library
Component library
You do not build a paywall out of rectangles. The library holds designed pieces — plan pickers, quizzes, proof, footers — and you place one and edit it.
Where it is
The top half of the left rail has two tabs: Screens, the list of screens in this flow, and Library. They swap, because you are doing one or the other. The Layers panel underneath stays put in both, since that is where whatever you place will land.
Sections and elements
| Tab | Description |
|---|---|
| Sections | Whole pieces of a screen: a plan picker, a quiz, a feature list, a testimonial carousel, a sticky footer. What you reach for when you are building a screen. |
| Elements | One thing at a time: a button, a price, a badge, a divider, a heading. What you reach for when you are finishing one. |
Inside each tab, the chips along the top narrow to a category — Plans & pricing, Quiz, Proof, Offers & urgency, Footer & legal, and so on. The search box matches names, categories and descriptions, so “plan”, “proof” or “countdown” all find the right shelf.
Element, then variant
Entries are grouped by what they are and then by how they look. A Plan picker is one idea with several arrangements — two stacked, two with a badge, four options, bare rows, packs — rather than several unrelated entries. Pick the arrangement closest to what you want; everything about it is editable afterwards.
Where it lands
The line under the chips tells you before you click, and it follows what you have selected:
| Selection | Description |
|---|---|
| A container — a card, a row, a footer | “Adds inside …” — it goes in, at the end. |
| A single element — a text, an image | “Adds after …” — it goes next to it, as a sibling. |
| Nothing | “Adds at the end of the screen.” |
Placed in the wrong spot, drag it in the Layers panel — that is a short move, and the panel shows the line where it will go. Layers & selection →
What comes with a section
Its copy and its data, not just its shape. Placing a quiz brings its option text and declares the variable it answers into; placing a plan picker brings its labels and binds its prices. That is why a section looks finished the moment it lands, and why deleting one takes its strings with it rather than leaving them behind.
The ＋ on a layer
Every row in the Layers panel has its own ＋, which opens the same catalogue as a quick list rather than a grid. Use the panel when you are browsing and the row's ＋ when you already know the name.