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.
One container, two variants
Collapsible - State: Inactive ยท Active - one row showing, or all three
Using the Collapsible
Why does the closed state still show a row?
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.
Why is there no usage frame on this page?
Collapsible is one of twelve 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.
Why does the chevron not flip?
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.
Is anything laid out with flex?
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.
What are the rows meant to hold?
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.