shadcn.io is not affiliated with official shadcn/ui
Webhook Events Changelog Block for Solid
Six webhook events as accordion rows with a New, Updated or Deprecated tag, a filter with counts, and an example payload with a Copy button in each row.
Installation
Overview
A webhook-events changelog for Solid with Ark UI, written for Echohook, a fictional webhook delivery service. A start-aligned header counts the events from the data and carries a filter (All, New, Updated, Deprecated, each with its count) at its end, with a polite line under it that says how many show. Under a band rule that meets the rails, one accordion row per event runs rail to rail: its name in mono, a tag with an icon and a word, one line on what changed and the day. The newest row is open on load. Opening a row shows its example payload as JSON in a labelled, focusable region of one fixed height, and a Copy button that fills the clipboard and tells screen readers so. Choosing a filter swaps the rows; the full list sits unseen in the same cell, in the same open state, so the block keeps its height. It's built from Accordion, Toggle Group, Copy Button, Badge, Button and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For webhook references, API release notes and developer portals. The events and payloads are example data.
FAQ
How do I change the events?
Edit EVENTS at the top of the file, newest first. An event has an id, a name, a kind (NEW, UPDATED or DEPRECATED), a line, a date as an ISO day and its payload as a string. The headline, the sentence under it, the filter counts and every row come from that list, and the payload you write is the text that is shown and copied.
How are new, updated and deprecated told apart without colour?
Each row carries an outline tag with an icon and a word: a sparkle and "New", a rising arrow and "Updated", an archive box and "Deprecated". The filter buttons use the same words and show how many events each holds.
What does Copy do?
It copies the open row's payload exactly as shown, swaps its icon for a check and, through a polite status line, says "Copied the example payload of delivery.retried". If the clipboard refuses it says it couldn't copy. Nothing is sent anywhere.
Does the filter move the page?
No. The rows you filter out are replaced in place and the full list is drawn once more, unseen, in the same cell with the same row open, so the block is always as tall as the unfiltered list. If you hide the open event, it stays open for when you bring it back.
How does it work with a keyboard?
Each row's trigger is a button: Enter or Space opens and closes it, and one event is open at a time. The filter is one tab stop and the arrow keys move between its buttons. Inside an open row Tab reaches the Copy button and then the payload region, which scrolls with the arrow keys. The up and down arrows also move between the rows.