shadcn.io is not affiliated with official shadcn/ui
Wireframe Sketch Grid Features Block for Svelte
A features section for a design-handoff tool: a 2 by 2 of framed screens in shared hairlines, each with a Switch that cross-fades a dashed greyscale wireframe into the solid screen it became.
Installation
Overview
A features section for Svelte with Ark UI, where each screen can be flipped from its sketch to its shipped design. A centred header sits over a 2 by 2 of cells that share their hairlines, rail to rail, for Sketchwell, a design-to-dev handoff tool: a pricing page, a team dashboard, a checkout and a phone onboarding. Each screen is drawn in a framed figure with a Switch under it, Wireframe or Shipped, that cross-fades a low-fidelity layout (dashed greyscale boxes, placeholder lines and crossed picture boxes) into the solid screen it became, with its caption in monospace changing to match. Both layers share one grid cell, so a frame never changes size. It's a Switch, the Guides line kit and your theme's tokens, with no button. For design systems, handoff, agency and prototyping products.
FAQ
How do I add or change a screen?
Each screen is a small component (PricingFrame, DashboardFrame and so on) that holds its own Switch state and renders two layers inside the shared Shell: a wireframe drawing and a shipped one. Copy one, draw its two layers with the Box, Dash and Surface helpers, and add it to the grid; the notes under the title are its wireNote and shippedNote. An odd number of screens leaves a gap in the grid, so add them in pairs.
How does the Switch work?
It's our Switch, one per screen, off by default (showing the wireframe). Turning it on fades the shipped layer in and the wireframe out over 300 milliseconds, and the caption under the title changes with it. The two labels beside it are decorative; the Switch is named for the screen ("Show the shipped design of Pricing page") so it reads clearly on its own, and Space toggles it from the keyboard.
The Ark Switch reports its state as details.checked.
Does the page move when I flip a screen?
No. Both layers sit in one grid cell with the same size, the hidden one is only made transparent, invisible and inert, and the stage has one fixed height, so nothing around it moves.
What do assistive technologies get?
The drawings are decorative and hidden from them, and the hidden layer is inert, so it can't take focus. What they get is the screen's name as a level-three heading, the caption that says which state is showing, and the named Switch.