Skip to content
DOL Studio

Collapse

Design: Stable Code: Coded layoutaccordion 2 Figma sets Collapse

Live preview

Single collapse (surface)
Click to expand
Authoritatively disseminate prospective leadership via opportunities economically sound.
Accordion — single-open mode (default)
Accordion — multi-open mode
Inline variant (text-only trigger)
Read more
Hidden text revealed inline. No container chrome, just blue text trigger.

Import & files

Import
import { Collapse } from "@dol/ui/collapse";
Source file
packages/@dol/ui/src/collapse/Collapse.tsx

Figma source

Figma source 2 sets
Page
Collapse
Sets
2
Primary set
Collapse · 2 variants Open in Figma →
Showing: Collapse
1 other set
  • Simple content sample 2 variants Figma →

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Collapse
Slug: `collapse`
Domain: general · Category: layout
Design: stable · Code: coded


## Description
Expandable / accordion content block.


## Import
```ts
import { Collapse } from "@dol/ui/collapse";
```
Source: `packages/@dol/ui/src/collapse/Collapse.tsx`


## Figma source
Page: Collapse
Sets: 2
Primary: Collapse
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=7756-81376

Related

  • Bạn đã xem hết

    Footer

    Coded
  • M
    audio

    Media

    Design only

  • Mockup UI (Status bar, Indicator, Browser)

    Coded

  • Card

    Code only

  • FeatureCard

    Code only

  • IconBox

    Code only

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).