shadcn.io is not affiliated with official shadcn/ui
Datadog Detail Integration Block for Ark UI
An integration detail section for a post-incident review tool connecting to Datadog: a header with the mark pair and Connect Datadog, a framed list of five application-key scopes with one optional write switch, and a three-step rail that rewrites itself.
Installation
Overview
An integration detail section for React with Ark UI, written for Aftermark, a fictional post-incident review tool, and its Datadog connection. A start-aligned header ("Aftermark pulls the incident into the review") carries one sentence, and behind a split divider at its end sit the mark pair (Aftermark's own tile and Datadog's neutral lettermark tile, joined by a connector), the Connect Datadog Shine Button and a View docs link. Under a band rule, a framed list at the start shows the five scopes of the application key in code (monitors_read, events_read, dashboards_read, timeseries_query and incident_write), each with its reason and a Read or Write mark. The first four are required; only incident_write is optional and has a switch, off by default. Turning it on rewrites step three of the three-step rail at the end ("The review link is added to the incident") without changing the rail's height, and the count in the frame's header ("4 read, 1 optional write") is worked out from the same typed list. The facts (built by, category, access, pricing, last updated) sit under the steps. On a phone the rail comes first, then the list, then the facts. The switch changes this page only, and a polite line says so. The page's rails and top rule come from the Guides spine. It's built from Guides, Frame, Badge, Switch, Button and Shine Button, with your theme's tokens for every colour. Datadog is named in text only: no Datadog logo, colour or wordmark ships with the block. The product, the reasons and the facts are example data.
FAQ
Can I show Datadog's logo?
The block names Datadog in text, the way any integration page says what it works with ("Aftermark for Datadog", "Connect Datadog"), and ships no Datadog logo, colour or wordmark. Datadog's tile is a neutral lettermark, Da in a muted square, sitting in an icon slot that a code comment marks: drop in the official logo only if you have the rights to use it, under the owner's brand guidelines, and never redraw it. The pair is hidden from assistive technology because the heading already names both products.
How do I change the scopes?
Edit SCOPES at the top of the file. Each entry is a Datadog authorization scope (shown in code, left to right in any layout), its access (READ or WRITE, each an icon and a word, never a colour), a purpose and whether it is optional. List exactly the scopes your application key asks for, so the page and Datadog's approval agree: a scoped application key is granted only the scopes it names. The count in the header and the optional switch are both worked out from the list.
What does the optional switch do?
It models the one write scope. Off, the rail says the graphs go into the review. On, step three adds that the review link is added to the incident, and a polite status line says "incident_write is on in this demo. Nothing was sent to Datadog." Both wordings are laid out in one cell so the rail never changes height. Wire toggle to your own setting if the choice should be saved.
Where should Connect Datadog go?
Both buttons are links (href="#"). Point Connect Datadog at your own setup flow and View docs at your guide. Nothing connects, signs in or sends anything from the block itself. Connect Datadog is a Shine Button, the block's one primary action; View docs is an outline button.
Both buttons take asChild with the link inside, so it can be your router's link.
How does it fit on a phone, in right-to-left layouts and with reduced motion?
Below lg the divider gives way to rules between the parts, and the parts stack in reading order: the header, the mark pair and buttons, the steps, the scope list, then the facts. Scope reasons move under the code and the switch gets its own row. In a right-to-left layout the columns and the step rail flip while scopes keep their left-to-right order. The header and buttons fade up once on load; reduced motion turns that off.