Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Integration blocks

Pro

Topics Worth an Article Accordion Integration Block for React

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.

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 list 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 topics ("10 topics in 3 sections, 1 draft started") sits beside a polite status line, present from load, that says a draft stays on the page. Then an accordion runs rail to rail, one band per Help Center section with the first open: each trigger names the section and badges how many topics and tickets sit in it. Inside, the topics are ranked by how many tickets in the last 28 days asked for them and no article answered: a rank, the topic, a thin bar with the count (the bar goes on a phone, the count stays) and a ghost Draft article button that turns to Draft started in the same slot. It's built from Guides, Accordion, Badge and Button, 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 sections, topics and counts are example data; nothing is read from or created in Zendesk.

FAQ

How do I change the topics?

SECTIONS holds each Help Center section with its topics and their ticket counts, most asked first. The ranks, the bars (sized against the most asked topic), the badges and the tally are worked out from it.

Does Draft article create anything in Zendesk?

No. It marks the topic as drafted on this page and says so in the status line. Hook your own handler where you open a draft; the demo never contacts Zendesk.

How does the accordion work with the keyboard?

Tab reaches each section's heading button, and Enter or Space opens it; only one section is open at a time. On this base the arrow keys do not move between headings: use Tab.

Is the content of closed sections in the page?

It stays in the HTML and can be found by the browser's find-in-page, which opens the section.

How is it built for screen reader users?

Each section's trigger sits in a real heading, the topics are an ordered list with their rank spoken, and every Draft button names its topic. The bar is a picture; the count is in text beside it, or under the topic on a phone.

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

On a phone the bar is hidden and the count moves under the topic. In a right-to-left layout the rows mirror; ranks, counts and badges are isolated so numbers keep their order.

  • 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

    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

    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

    Grouped Comments List Integration

    Grouped and triaged

    An integration list section for a design-docs tool connected to Figma: comments grouped by frame in an accordion running rail to rail, a toggle that hides resolved ones without moving a header, and a Retry for the one comment that failed to sync.

  • Pro

    Categorized FAQ

    Topics and filters

    A topic-tabbed FAQ for a bookkeeping app: a compact header, a band of line tabs with a count on each, and one accordion per topic.

All 100 integration blocks