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 React

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

  • 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

    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 Setup Integration

    Guided steps

    An integration setup section for a release gate connecting to Sentry: three read-only steps as hairline cells, a listbox of Sentry projects, an environment toggle, a release switch, a test error that appears in the panel and a Finish setup button that waits for it.

  • Pro

    Approval Screen Setup Integration

    Choose and verify

    An integration setup section for a stock sync tool installing on Shopify: a narrow framed panel that sketches the approval step, with a store-handle field and fixed .myshopify.com suffix, four locked access scopes, a reserve location and an Install button.

All 100 integration blocks