Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Integration blocks

Pro

Support Surfaces Switch Grid Integration Block for Vue

An integration grid section for a Help Center suggestion tool connected to Zendesk: four surfaces (ticket sidebar, web widget, email auto-reply, Help Center search) as hairline cells with a small greyscale drawing and a switch each, and a derived tally.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An integration grid section for Vue with Ark UI, written for Answerloft, a fictional tool that suggests Help Center articles inside support tickets, and its Zendesk connection. A compact header carries the mark pair at its end. Under a band rule, a tally worked out from the cells ("3 of 4 surfaces on") sits beside a polite status line, present from load, that says switches change the page only. Then four places Answerloft can appear sit in a 2 by 2 of shared-hairline cells that overshoot the rails: the ticket sidebar, the web widget, the email auto-reply and Help Center search. Each cell has a sentence, a small greyscale drawing of the surface (rectangles on a hairline frame, the suggested articles as foreground bars) and a switch. Switching a surface off turns its suggestions to dashed outlines and dims the cell with a solid tint, and never hides or moves anything. It's built from Guides and Switch, with your theme's tokens for every colour. Zendesk is named in text only: no Zendesk logo, colour or wordmark ships with the block. Nothing is read from or sent to Zendesk.

FAQ

How do I change the surfaces?

SURFACES holds each one's name, sentence and whether it starts on. The tally, the cell tint, the drawings' dashed state and the status sentences all read the same state, so a surface added to the array shows up everywhere. A new picture needs its own small component, like the four here.

Does a switch change anything in Zendesk?

No. A switch changes this page's state and the status line says so ("Answerloft is off in Email auto-reply in this demo"). Hook your own handler where you save the setting.

Are the drawings accurate pictures of Zendesk?

No. They are small neutral sketches of where the suggestions would sit, drawn with rectangles and the theme's tokens. They are hidden from assistive technology because the cell's name and sentence say the same thing.

How do keyboard and screen reader users work it?

Each cell is a list item with a heading and a switch named for its surface ("Suggest articles in Ticket sidebar"), so every switch is announced with what it controls. The status line is a polite live region that is in the page from the start.

Does switching move the page?

No. A cell keeps its height whatever its state: the switch word changes from Suggestions on to Suggestions off, the drawing swaps solid bars for dashed outlines of the same size, and the tint is a solid mix, not a fade.

How does it behave on a phone and in right-to-left layouts?

On a phone the four cells stack in one column. In a right-to-left layout the cells and the switch mirror, while each drawing keeps its own left-to-right order, as the interface it pictures would.

All 100 integration blocks