shadcn.io is not affiliated with official shadcn/ui
Linear Setup Integration Block for React
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 Base 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.
Related
- Pro
Linear Detail Integration
Scopes and stepsAn integration detail section for a cycle-planning tool connecting to Linear: one framed panel with a three-way access level over a checklist of six permissions that grows with the level, the OAuth scopes it requests, and three install steps.
- Pro
Linear Grid Integration
Cards and previewsAn integration grid section for a cycle-planning tool syncing with Linear: six issue fields on shared hairlines, each with a drawing of its two sides whose arrow flips and a three-button direction control, plus a derived tally.
- Pro
Linear List Integration
Grouped and triagedAn integration list section for a cycle-planning tool reading issues from Linear's Triage: three real tabs, five issue rows with Accept and Decline always visible, a roving keyboard set (J, K, A, D) that only acts inside the list, and a working Retry.
- Pro
Linear Stats Integration
Lines and dotsAn integration stats section for a cycle-planning tool reading finished issues from Linear: a framed strip plot of days to done on one 0 to 14 day axis, four team lanes with a dot per issue and a median tick, and a headline that names the slowest issue.
- Pro
AWS Setup Integration
Guided stepsAn integration setup flow for a cloud cost tool connecting to AWS: a scope and 12-digit account ID, two aws iam commands built from that ID with a derived External ID, and a pasted role ARN that is parsed and checked against the account.
- Pro
Stepper Wizard Progression Features
Timelines and stepsA working CSV import wizard in a framed card: Upload, Map columns, Preview and Import, with real Back and Next buttons, selects that match columns to fields and a preview that follows the choices.