Forecast Status, animated React component

An app-review status card that shows its state as weather. Waiting is a lilac sky with clouds drifting by; in review it clouds over and rains; approved, the clouds part, the sun comes out with turning rays and a rainbow; rejected, a purple storm rolls in with sheets of rain and lightning. Every change blends the sky, clouds and rain over a second. Move across the sky and the clouds drift away from you; tap it and the weather answers (a splash, a lightning strike, a sparkle).

Pro
Cards
Hover
Glow

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

OrbitVersion 2.4 (318)

Waiting for review

Submitted 2 hours ago. Reviews usually start within a day.

Submitted
In review
Approved

Props

Prop	Type	Default	What it does
status	ReviewStatus	—	The status shown in the component.
defaultStatus	ReviewStatus	"waiting"	Starting value of status when you leave it uncontrolled.
onStatusChange	(s: ReviewStatus) => void	—	Called when the visitor uses status change.
appName	string	"Orbit"	The app name shown in the component.
version	string	"Version 2.4 (318)"	The version shown in the component.
rejection	string	—	reason shown when it's rejected
onRelease	() => void	—	Called when the visitor uses release.
onResubmit	() => void	—	Called when the visitor uses resubmit.
showSwitcher	boolean	false	a row of buttons under the card to preview every state
autoplay	boolean	false	Plays a demo by itself until the first touch. Held still under reduced motion.
className	string	""	Extra classes for the outer element.

Add it to your project

1
Set up your project once
You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:
```
npx shadcn@latest init -d
```
Starting from nothing? The Quick Start walks through the whole thing.
2
Connect the registry with your API key
Forecast Status is a Pro item, so the CLI has to send your API key. Do this once per project:
1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
```
NEXUS_API_KEY=nxs_your_key_here
```
3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
```
"registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}
```

Forecast Status, animated React component

Play with it

Waiting for review

Props

Add it to your project

Set up your project once

Connect the registry with your API key

Add the component

Check what was added

Copying by hand? Skip the registry

Use it in a page

Forecast Status, animated React component

Play with it

Waiting for review

Props

Add it to your project

Set up your project once

Connect the registry with your API key

More cards