Collapsible
One container, two variants. The smallest component in the kit, and the one that shows most clearly how a state axis stands in for an interaction.
Collapsed is one row, not zero
The closed state keeps the first row visible and hides the other two. That is the shape shadcn/ui gives it as well: a Collapsible is not an Accordion item that shuts completely, it is a list that shows its headline and holds the rest back. Hiding everything would leave a title and a button floating with nothing under them.
| Part | Size and position | Detail |
|---|---|---|
| Collapsible | 350 × 76 closed, 350 × 164 open | no fill, no border, no padding |
| Flex | 350 × 32 at the top | the header row, title left and trigger right |
| Title | x 16, 20 tall | Geist 14 / 600, base.foreground |
| Button | 32 × 32 at x 302, radius.lg | no fill and no stroke, a 16px icon inset by 8 |
| Div | rows of 350 × 36 from y 40, gap 8 | base.background, 1px base.border, radius.md |
| Row text | x 16, 318 wide, 20 tall | Geist Mono 14 / 400, base.foreground |
The trigger carries Tabler's selector, two chevrons pointing away from each other, and it is drawn identically in both states. A single chevron that flips would say which way the panel is about to move; a selector says the panel moves both ways and leaves the answer to the row count underneath. It also means one icon covers both variants with no rotation to keep in sync.
Status, price and location are field values, and the component was drawn for the case shadcn/ui documents it with: a small stack of machine-ish facts under a heading. Geist Mono at 14 keeps the labels lining up down the left edge. The title above stays in Geist at 600, so the heading and the data read as two different kinds of text.
Collapsible is one of the thirteen pages in the file that stop at the Components frame and carry no second frame of worked examples. There is one container with two variants and nothing else on the page, so rather than draw a usage frame that does not exist, the preview above simply lets you work the real component: the trigger is live and the panel opens and closes exactly as the two variants are drawn.
One container, two variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Collapsible
Because a Collapsible holds back the rest of a list rather than shutting completely. The first row stays put and the other two are hidden, which is how shadcn/ui documents it. Closing it down to a bare title and a button is what an Accordion item does, and the kit already has one of those.
Collapsible is one of thirteen pages that stop at the Components frame. Two variants of a 350px block is the whole component, and a second frame would only repeat them at a different size. The preview above is live instead, so you can work the trigger.
It is Tabler's selector, two chevrons pointing away from each other, and the file draws it identically in both states. A rotating chevron promises a direction; a selector says the panel moves both ways. It also keeps the two variants from differing by a transform you have to remember to keep in sync.
No, and it is the only component in the kit built that way. Every part sits at an absolute position inside the 350px board: header at y 0, content from y 40, rows of 36 at an 8px gap. Resizing it means moving the rows yourself rather than letting a layout do it.
Field values. They are set in Geist Mono at 14 so labels line up down the left edge, while the title above stays in Geist at 600. Status, price and location are placeholders for whatever record the block is summarising.