shadcn.io is not affiliated with official shadcn/ui
No Webhooks Empty State Block for Solid
An event relay's empty endpoint list as a builder: a URL, four events to tick, a code window with the JSON body and a curl command, and one Add endpoint button that lists the endpoint and sends a simulated test event.
Installation
Overview
Turn an empty webhook list into the first endpoint, with this no webhooks empty state for Solid with Ark UI. A hairline frame with a plus mark on each corner holds the endpoint list of Homingly, an event relay, as bands: a list that is one dashed row until there is an endpoint, then a split of a form and a drawing. The form is the URL to call and four Checkboxes, one per event. At its end the drawing of the relay (Events, an arrow marked POST, your server) sits over a code window with Tabs for the JSON body of the first ticked event and a curl command with your URL in it, and a Copy Button for the open tab. The Shine Button, the only colored control, Add endpoint, lists the endpoint and turns the arrow and the server solid; a Send a test event button then simulates one delivery. The bands are ruled by Guides, and everything moves with CSS only. For the first screen of any integration, billing or messaging dashboard.
FAQ
What stays in the page, and how do I make it real?
Nothing is saved or sent. The endpoint is a row kept in the page's state, the host is made up and the event ids, the order and the delivery times are typed. To wire it for real, save the endpoint with your API where the code says so, post a real event from your server for the test button, and list what your API returns in the first band instead of the typed row.
Where does the payload come from?
It is built from the first event you tick, in the order the list shows them: the id and time of a sample delivery, the event's type and a few typed fields. The curl tab writes the same event as a command aimed at the URL you typed, or at a placeholder while the field is empty. The Copy button copies the open tab, which is the one thing here that leaves the page; with no event ticked it says so instead of copying.
What does Send a test event do?
It starts a simulated delivery: a small packet runs along the arrow for under a second, then the list row says "Sample delivered: 200 in 148 ms", with a typed time for each of three tests. It is limited to three and cannot be started while one is running. Nothing is requested, and the arrow's motion is a CSS transition that is off under reduced motion.
What if the URL or the events are wrong?
The Add endpoint button is always there. Pressing it with a URL that does not start with https:// puts focus on the URL field with a message in the foot, and pressing it with no event ticked puts focus on the events list. The foot is the one live message; its words are short so the pinned foot on a phone does not grow.
Does the panel change height?
No. The list is one row high whether it is dashed or holds the endpoint, the two code tabs share one height, and the form fields are locked once the endpoint exists (Start over unlocks them) instead of being replaced. On a phone the code window sits below the form and scrolls sideways inside itself.