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 Aria

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 React Aria, 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?

Yes, it stays in the HTML while closed.

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.

All 100 integration blocks