shadcn.io is not affiliated with official shadcn/ui
Linear Setup Integration Block for Radix UI
An integration setup flow for a cycle-planning tool connecting to Linear in three steps: who comments and creates issues (an app or you, each with a drawn sample comment), the OAuth scopes to ask for, and a test issue with its draft card.
Installation
Overview
An integration setup flow for React with Radix UI, written for Cyclemoor, a fictional cycle-planning tool, and its Linear connection. A start-aligned header ("Connect Cyclemoor to Linear") has the mark pair at its end. Rail-to-rail bands hold a three-step progress strip (the catalog Steps), the open step and the foot with Back, Continue and the Finish setup Shine Button. Step 1 asks who comments and issues should read as: two radio cards, "Cyclemoor, as an app" (actor=app) and "You" (actor=user, Linear's default), each with a drawn sample comment. Step 2 ticks the OAuth scopes: read is always included, comments:create, issues:create and write are optional and admin is listed as never requested; the authorize parameters are shown, derived from the choices. Step 3 creates a test issue, which needs issues:create or write, and shows its draft card (CYM-1, "Test issue from Cyclemoor", its labels and who created it). Finish setup waits for the test issue and gives its reason while it waits, then says "Connected in this demo". Every step sits in one cell beside an unseen copy of them all, so the band keeps the tallest step's height, and each new step's heading takes focus. It's built from Guides, Steps, Radio Group, Checkbox, Field, Badge, Button and Shine Button, with your theme's tokens for every colour. Linear is named in text only: no Linear logo, colour or wordmark ships with the block. Nothing is created in or sent to Linear, and the issue, labels and comment are example data.
FAQ
What do the two options mean in Linear?
Linear's OAuth authorize request takes an actor parameter. With actor=user, the default, what the app creates shows the person who authorized it as the author. With actor=app, what it creates shows the application as the author, which suits an agent or service account; Linear's documentation says a workspace admin has to install an app that acts as itself. The drawn comments only show how each choice would read.
Which scopes are offered, and which are never asked for?
read is Linear's default and is always included. comments:create creates issue comments, issues:create creates issues and their attachments, and write is the broad write scope, which covers changing existing issues. admin (full access to admin-level endpoints) is shown ticked off and disabled because Cyclemoor never requests it. Edit OPTIONAL and ADMIN at the top of the file to match what your app asks for; the authorize parameters under the list are built from the ticked scopes as one comma-separated scope= value.
Does Create a test issue create an issue in Linear?
No. It draws the draft card on this page and the status line below the flow says "CYM-1 created in this demo. Nothing was sent to Linear." The button waits (and says why) until issues:create or write is ticked, since a real test issue needs one of them; changing the actor or the scopes clears the draft. Replace create with a call to Linear's issue-creating API in a real product.
What does Finish setup do?
It waits for the test issue, giving its reason beside the button, then shows "Connected in this demo", the scope parameter and who acts, and a ghost Disconnect that starts over. The status line, in the page from the first paint, says "Nothing connects or is sent to Linear in this demo." and describes each step's result. Nothing is stored.
How does it work with a keyboard and a screen reader?
The steps are the catalog Steps with real tabs, and each new step's heading takes focus when you move, so reading continues where the content changed. The two actor cards are one radio group named "Who acts", and each scope is a checkbox named by its scope in code. Continue and Finish stay focusable while they wait and say why in words. Back and the finished state keep the band's height, so nothing jumps.
How does it fit on a phone, in right-to-left layouts and with reduced motion?
On a phone the step names collapse to numbers (still named for assistive technology), the two actor cards stack and the foot's buttons fill the width. Scopes and parameters keep their left-to-right order in a right-to-left layout while the bands flip. The header fades up once on load; with reduced motion it simply appears.