Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Integration blocks

Pro

Support Surfaces Switch Grid Integration Block for React

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 React with Base 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.

  • Pro

    Ticket Suggestions Detail Integration

    With a product drawing

    An integration detail section for a Help Center suggestion tool connected to Zendesk: a mark pair beside a Connect Zendesk button, three scopes read or write, three steps, and a framed example ticket with three ranked article suggestions.

  • Pro

    Help Center Sections Checkbox Tree Setup Integration

    Choose and verify

    An integration setup section for a Help Center suggestion tool connected to Zendesk: a framed checkbox tree of categories and sections with article counts, a brand Select, three read-only steps, a derived indexing line and a Finish setup button.

  • Pro

    Topics Worth an Article Accordion Integration

    Grouped and triaged

    An integration list section for a Help Center suggestion tool connected to Zendesk: an accordion of Help Center sections, the first open, each with ranked topics, a ticket count bar and a Draft article button that turns to Draft started.

  • Pro

    SLA Bullet Bars Integration

    Bars and columns

    An integration stats section for a Help Center suggestion tool connected to Zendesk: four bullet bars of median first reply time against the SLA target for each ticket priority, each with a word and a glyph, and a derived count within target.

  • Pro

    Location Cards Grid Integration

    Switch and tick grids

    An integration grid section for a stock sync tool connected to Shopify: four locations as a 2 by 2 of hairline cells, each with units on hand, a bar of stock held back, a sync switch and a slider for the reserve per variant, and a tally worked out from them.

  • Pro

    Message Layouts Grid Integration

    Cards and previews

    An integration grid section for a spend approvals tool posting to Slack: a list of six message layouts beside a framed preview that draws the chosen one as a greyscale message, with a drawn app tile, text, facts and action chips.

All 100 integration blocks