Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Integration blocks

Pro

Ticket Suggestions Detail Integration Block for React

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.

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 detail 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 title and one sentence. Behind a split divider that runs from the top rule to the block's foot, the mark pair (Answerloft's filled tile and Zendesk's neutral lettermark tile) sits above a Connect Zendesk Shine Button and a View docs link. Under a band rule, the start holds what the app can read and write (three scopes in code, each marked Read or Write by an icon and a word, counted "2 read, 1 write") and how it works in three steps. The end holds a framed example ticket, drawn as a picture of the idea: the customer's message, then three suggested articles each with a match score as a thin bar and an Insert link chip. The facts (built by, category, pricing, last updated) close the column. It's built from Guides, Badge, Button and ShineButton, with your theme's tokens for every colour. Zendesk is named in text only: no Zendesk logo, colour or wordmark ships with the block. The ticket, the articles and the scores are example data; nothing connects.

FAQ

Which Zendesk permissions does it list, and are they real?

tickets:read and hc:read are read scopes and tickets:write is a write scope, all names Zendesk's OAuth clients can request. The list is PERMISSIONS; change it to exactly what your app asks for. The purpose line for tickets:write says Answerloft adds internal notes only, which is a promise about your own app: Zendesk's scope itself also allows public replies.

Is the ticket a real Zendesk screen?

No. It is a drawing of the idea in your theme's tokens: a message, a ranked list and a match bar per article. The Insert link chips are pictures, not buttons, and are hidden from assistive technology. Replace the figure with a screenshot you have the rights to use if you prefer.

Where do the logos go?

Both tiles are icon slots with a code comment. Answerloft's holds a stand-in icon and Zendesk's holds the two typed letters Zd. Drop in a logo you have the rights to use, under Zendesk's brand terms; the block never ships or redraws it.

Does Connect Zendesk connect anything?

No. It is a link with href="#". Point it at your own OAuth start URL. A detail section has no state, so nothing here claims a connection was made.

How is it built for keyboard and screen reader users?

One h2, h3 for each part, real lists for the scopes and the steps, and a dl for the facts. The scope tags carry a word as well as an icon. The example ticket reads in order: the customer, the message, then each article with its section and match.

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

On a phone the divider becomes a rule between the parts and the ticket sits under the copy. In a right-to-left layout the split mirrors; scopes stay in code with their own direction, and counts and dates are isolated.

  • 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

    Support Surfaces Switch Grid Integration

    Switch and tick grids

    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.

  • 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

    Sentry Detail Integration

    With a product drawing

    An integration detail section for a release gate connecting to Sentry: a compact header, a mark pair beside a Connect Sentry button, the three scopes it asks for marked read or write, three steps, and a framed stack trace captioned with the release that first saw the error.

  • Pro

    Slack Detail Integration

    Scopes and steps

    An integration detail section for a spend tool connecting to Slack: a header with the mark pair and Add to Slack, then what it does, the Slack scopes it reads and writes, three steps to install and the listing's facts.

All 100 integration blocks