Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Integration Log Changelog Block for Ark UI

Five connector changes as rows that run rail to rail and end the block, each with a neutral lettermark plate, a state badge, a day and a scopes popover listing what the connector reads and writes.

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 changelog for React with Ark UI, written for Plugpoint, a fictional integrations hub. A compact header carries the title, one sentence and, at its end, a count of the changes by kind ("2 connected, 2 updated, 1 deprecated") taken from the rows. Under a band rule, five rows run from rail to rail and end the block. Each row has a neutral two-letter plate in place of a logo, the service's name in text, the change in one line, its state as an outline badge with an icon and a word (Connected, Updated, Deprecated), the day, and a "3 scopes" button. The button opens a popover that lists what Plugpoint asks that service to read and write, each scope marked Read or Write with an icon and the word. On a phone the day is dropped and the state and button sit under the text. It's built from Guides, Badge, Button and Popover, with CSS transitions for the entrance and your theme's tokens for every colour. For integration directories, app marketplaces and release pages that show which connections changed. The changes and scopes are example data, not claims about any service.

FAQ

How do I change the connectors?

Edit CONNECTORS at the top of the file, newest first. A connector has an id, a two-letter mark, a name, the change sentence, an ISO date and a state (Connected, Updated or Deprecated), plus a scopes list. The count in the header and the "3 scopes" label are worked out from those arrays, so they stay true when you edit. The day on screen is spelled out from the ISO day by a small helper, so it reads the same on the server and in every browser. Dates are fixed, never computed from today.

Where do the service logos go?

The plate is a plain tile with two typed letters, marked as decoration, and the service is named in text beside it. If you have the right to use a service's logo, replace the tile's contents with it. The block does not draw or imitate any brand's mark, and uses no brand colours.

How does the scopes popover work?

Each button is the trigger of its own popover, so Enter or Space opens it, Escape closes it and focus goes back to the button. The popover has a title ("Slack scopes"), a sentence and a list: each scope is an outline badge with an icon and the word Read or Write, then its name. The button's name is "3 scopes for Slack" for assistive technology, so a screen reader user can tell the buttons apart.

How are the states told apart without colour?

Each state is an outline badge with an icon and the word: a plug for Connected, circular arrows for Updated and an archive box for Deprecated. The icons are marked as decoration, so a screen reader hears the word. The three states are constants at the top of the file.

How does it fit on a phone?

Below sm the day is dropped, and each row becomes a plate and the text on one line with the state and the scopes button underneath. Nothing moves sideways at 320 pixels, and the popover stays inside the screen.

What moves, and what happens with reduced motion?

The header and the list fade up once on load, with CSS transitions, and the popover has its own enter animation. With reduced motion all of them are off and the block simply appears.

All 200 changelog blocks