Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Integration blocks

Pro

Ticket Suggestions Detail Integration Block for Svelte

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 Svelte 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 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.

All 100 integration blocks