shadcn.io is not affiliated with official shadcn/ui
Sentry Setup Integration Block for Vue
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.
Installation
Overview
An integration setup section for Vue with Ark UI, written for Hatchway, a fictional release gate, and its Sentry connection. A compact header ("Connect a project, then check it") has the mark pair at its end. Under a band rule, the catalog's Steps sit as three cells that share their hairlines (Pick a project, Choose where it runs, Send a test error), read only: the steps you have reached take a check and the next one an outlined marker. Under them, one framed panel holds the choices: a listbox of three Sentry projects (storefront-web, storefront-api and storefront-worker) that the arrow keys move through, a two-way toggle for the environment (Production or Staging) with a line under it that says which one Hatchway watches, a switch for creating a release on every deploy, and a Send a test error button. The test adds one typed issue to the panel, "TestError: Hatchway connection check", with the environment and the release name that your choices would produce. The Shine Button Finish setup waits for the test and says what is missing. Changing a choice clears the test, because it no longer matches what you chose. A polite status line, in the page from the first paint, says what stays local. The block ends on its framed panel. The page's rails and top rule come from the Guides spine. It's built from Guides, Steps, Listbox, Toggle Group, Switch, Field, Button and Shine Button, with your theme's tokens for every colour. Sentry is named in text only: no Sentry logo, colour or wordmark ships with the block. Nothing is sent to Sentry, and the projects are example data.
FAQ
How do I change the projects and environments?
Edit PROJECTS and ENVIRONMENTS at the top of the file. A project has a value, a label and the platform it was created for; VERSION is the version used in the example release name. The steps' progress, the test's text and the status line are all worked out from what is chosen.
Does Send a test error send anything to Sentry?
No. It adds one typed issue to this panel and says so in the status line ("A test error was added in this demo for storefront-web in Production. Nothing is sent to Sentry."). In a real product, send an event with the project's DSN or ask Sentry's API for the project's latest issue, then show what comes back. The release name follows the project@version shape Sentry uses.
Are the steps buttons?
No. They show progress and are not controls, so they are not in the tab order. The controls are in the panel below: the project list, the environment toggle, the release switch, the test button and Finish setup. A step is reached once the ones before it are done, so choosing an environment before a project doesn't tick step 2.
How is it named for keyboards and screen readers?
The listbox is named "Sentry projects" and moves with the arrow keys, and choosing is announced by the browser's usual listbox behaviour. The environment toggle is named "Environment" and can be left unset. The switch is part of a label, so its text toggles it. Send a test error and Finish setup stay focusable when they aren't ready, and press for press they say what is missing in the status region.
How does it fit on a phone, in right-to-left layouts and with reduced motion?
On a phone the steps stack, showing only their numbers and titles, and the panel's areas stack in one column; the test result keeps the same height whether or not an issue has been added. In a right-to-left layout the panel flips and release names keep their left-to-right reading order. The header fades up once on load, and the Shine Button's shine and the listbox's check animation stop under reduced motion.