Elemental Picker, animated React component

Elemental Picker: a set of mode capsules where the chosen one comes alive. Choose Ember and the capsule catches fire: flames lick up its sides, embers fly and smoke curls off the top. Solar throws long rays that turn slowly behind it, Bloom showers it in petals that flutter down and settle, and Breeze sends wind streaks curling past with tumbling leaves while the capsule sways in the gusts. The old element dies down as the new one starts, and everything is reflected in a glossy floor. Keyboard: it's a radio group. Arrow keys move the choice; Tab leaves.

Pro
Inputs & Controls
Hover

Play with it

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

Choose a tone

Sets the mood of every answer.

Props

Prop	Type	Default	What it does
options	ElementOption[]	DEMO	the choices, in order; any of bloom, ember, solar and breeze
value	ElementName	—	The value shown in the component.
defaultValue	ElementName	"ember"	Starting value of value when you leave it uncontrolled.
onChange	(value: ElementName) => void	—	Called with the new value whenever the visitor changes it.
title	string	"Choose a tone"	The title shown in the component.
subtitle	string	"Sets the mood of every answer."	The subtitle shown in the component.
autoplay	boolean	false	Demo itself until someone touches it. Off by default.
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
Elemental Picker 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}"
    }
  }
}
```

Elemental Picker, animated React component

Play with it

Choose a tone

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

Elemental Picker, animated React component

Play with it

Choose a tone

Props

Add it to your project

Set up your project once

Connect the registry with your API key

More inputs & controls