Responsive Previews
Components with responsive classes are rendered at sm, md, lg, and xl breakpoints automatically.
How it works
The scanner analyses each component's class list for responsive prefixes (`sm:`, `md:`, `lg:`, `xl:`). When found, the plugin generates a responsive preview block — a row of frames, one per breakpoint, each clipped to the correct viewport width. Classes resolve correctly at each size, so `hidden sm:flex` and `flex-col sm:flex-row` behave exactly as in the browser.
Usage
- 1
No setup required — responsive classes are detected automatically.
- 2
Components with any `sm:`, `md:`, `lg:`, or `xl:` prefix get a responsive preview row.
- 3
Each breakpoint renders in a frame clipped to its viewport width (640, 768, 1024, 1280 px).
- 4
Class resolution at each breakpoint matches browser behaviour — `hidden sm:flex` correctly hides at base and shows at sm.
- 5
The responsive row appears beneath the default story frames in the design system page.