Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Integration blocks

Pro

Help Center Sections Checkbox Tree Setup Integration Block for Ark UI

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.

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 setup section for React with Ark UI, written for Answerloft, a fictional tool that suggests Help Center articles inside support tickets, and its Zendesk connection. A reverse split behind a divider: at the start, a framed tree of the Help Center's categories and sections, each with a checkbox (a category shows a partly ticked box when only some of its sections are) and its article count. At the end, in bands that share the divider, sit the title and the mark pair; a three-step band (Sign in, Choose, Review) that follows what you do; a Select for the brand, which swaps in that brand's own Help Center; then a line worked out from the ticks ("14 of 22 articles will be indexed"), a polite status line, and the Finish setup Shine Button, which turns to a ghost Disconnect once it has run. Nothing connects: signing in is skipped, the status line says choices stay on the page, and any change after finishing takes the setup back to unfinished. It's built from Guides, TreeView, Select, Steps, 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 brands, sections and counts are example data.

FAQ

How do I use my own Help Center?

BRANDS holds each brand with its categories, sections, article counts and the sections ticked at the start. The tree, the counts per row, the totals and the sentence "N of M articles will be indexed" are worked out from it. Replace it with what the Zendesk API returns for your brands and sections.

Does Finish setup connect to Zendesk?

No. It marks the setup finished on this page and says so in the status line ("Connected in this demo"). Hook your own handler there. Sign-in is skipped in the demo, which is why the first step starts done.

How does the tree work with the keyboard?

The tree is one Tab stop. Up and Down move between visible rows, Right opens a category and Left closes it, and Enter or Space on a section ticks or unticks it, as does clicking its row. The round box on a category row ticks all of its sections for a pointer; from the keyboard, tick the sections one by one. A category with only some sections ticked shows a partly filled box.

What does the brand Select change?

It swaps in that brand's own tree and its own starting ticks, and shows the brand's Help Center address. Brands are a Zendesk concept: each can have its own Help Center. The tree keeps its height, with its own scroll, so switching brands never moves the page.

How is it built for screen reader users?

The steps are a read-only list, the Select has a visible label, the tree has a hidden name, and the status line is a polite live region present from load. The count under the tree and the derived sentence are plain text, so they can be read at any time.

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

On a phone the parts stack: title, steps and brand, then the tree, then the sentence and the button. In a right-to-left layout the split mirrors and the tree's chevrons flip; counts are isolated so numbers keep their order.

All 100 integration blocks