Feedback

Status Alert Banner

A bordered banner that pairs an icon with a title and optional description to surface a success or error state inline.

Success! Your changes have been saved

This is an alert with a title and description.

Deploy failed on the production branch

Check that the deploy key still has repository access.
Confirm the build command matches the project settings.
Retry the sync once the above are fixed.

Using Status Alert Banner

A bordered banner that pairs an icon with a title and optional description to surface a success or error state inline.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: variant, title, description, accentColor

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2117Breathing dot loaderFeedbackDots that stay put and breathe instead of moving, swelling and dimming in turn so the row reads as a slow heartbeat.

1937Click ripple burstFeedbackA pointer-feedback effect that spawns a brief animated shape exactly where the user clicks or taps.

2122Click spark burstFeedbackEvery press throws a ring of short lines out from the exact point of contact, each one stretching away and shrinking to nothing as it flies.

2129Content Loading CardFeedbackA card-shaped placeholder that breathes with a slow opacity pulse while a large image block and two lines of text are still loading.

1945Count badge clusterFeedbackA row of word pills and compact numeric tokens for labeling or counting things inline.

2138Curtain line loaderFeedbackA loading curtain that retreats behind a bright travelling line, cutting the finished content into view instead of fading it in.