shadcn.io is not affiliated with official shadcn/ui
No Webhooks Empty State Block for React
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 React with Base 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.
Related
- Pro
No API Keys Empty State
Developer toolsAn API platform's first-key page as a split screen: a name, a scope and one Create key button that shows a made-up demo key once with a copy button, then masks it into a one-row list with Revoke, while a drawn gate takes its pin.
- Pro
No Environments Empty State
Developer toolsA config manager's empty environment list as three dashed isometric slabs that turn solid one at a time, with an Add variable row that counts variables on each slab and one Shine Button that names the next environment to create.
- Pro
No Logs Empty State
Developer toolsA log console window with nothing logged yet: a dashed pipe from an app to a console, four level chips with counts, a Follow switch, a dark console and one Send a test line button that prints the next of twelve typed lines.
- Pro
No Deployments Empty State
Developer toolsA deploy platform's first-deployment page as a split screen: an environment, a Skip tests switch and a dark terminal whose command follows them, one Copy command button, and a sample run that lists a first deployment while a drawn balloon fills.
- Pro
No Integrations Empty State
Apps and integrationsAn integrations catalog with nothing connected: tabs by category over real services with Connect toggles, and a drawn board of six empty bays that takes a lettermark tile in the next free bay as each one is connected.
- Pro
No Error Tracking Empty State
Developer toolsAn error monitor's empty list as an install guide: a code window with npm, pnpm and bun tabs and a copy button, an initialise snippet, a Send a test error button that lists one simulated row, and a calm lake whose ring turns solid.