Alert

A message in the page that needs attention.

FeedbackOpen in Figma

Inspect

Your paywall is live

New visitors see it from now on. Existing subscribers are not affected.

Trials started this week are up 18%.

We could not renew your plan

Update your billing details and we will try again tonight.

Check the card number and expiry date
Make sure the card allows online payments
Confirm the billing address

Installation#

Terminal

npx shadcn@latest add @sphere-kit/alert

Usage#

alert.tsx

import {  Alert,  AlertTitle,  AlertDescription,  AlertAction,} from "@/components/ui/alert"

Examples#

Basic

Your funnel is saved.

It shows on the dashboard from the next refresh.

Numbers for today are still coming in and may change.

With Icons

Two links share the same tag. Review them.

Tracking is paused on sphere.link/spring. Turn it back on or see why.

Your weekly report is ready

Signups are up 12% on last week. The team gets it by email at 9am.

The pricing page test has run for 14 days and the new layout is ahead on trials started, but not yet on paid conversions

Visitors from the spring newsletter skip the landing page, so they show up in the funnel from step two onward and the first step looks smaller than it is

Three of your live links point to a page that now redirects, so the clicks still count but the visits after them land on the old pricing page instead of the new one

The links are sphere.link/spring, sphere.link/spring-trial and sphere.link/spring-pricing. Update their destination to the new pricing page and the funnel picks up the change within five minutes. Clicks from before the change stay where they are, so the report for this week will show both pages. Nothing is lost, and you can change the destination back at any time.

Destructive

You have been signed out

Your session ended after 30 days. Sign in again to keep editing.

We could not renew your plan

Update your billing details and we will try again tonight.

Check the card number and expiry date
Make sure the card allows online payments
Confirm the billing address

With Actions

3 links moved to the archive.

They stop redirecting at midnight. Restore them from the archive before then to keep them live.

Archived

Inside Card

Create funnel

Name it and pick where the data comes from.

You have used all 3 funnels on the free plan.

Move to Team for unlimited funnels, or delete one you no longer use.

Winter launch

Last viewed 2 days ago

Do and don't#

One rule for using it well. Open one to see it drawn.

API reference#

Exports Alert AlertTitle AlertDescription AlertAction. Every part takes its element's usual props and a className.

Prop	Options	Default
variant	`defaultdestructive`	default

Installation#

Usage#

Examples#

Do and don't#

An alert says what happened and what to doAn alert says what happened and what to do

API reference#

Installation#

Usage#

Examples#

Basic

With Icons

Destructive

With Actions

Inside Card

Do and don't#

An alert says what happened and what to doAn alert says what happened and what to do

API reference#

Basic

With Icons

Destructive

With Actions

Inside Card