Glass Edit, animated React component

A profile you edit where it stands. Point at any text and it sinks into a faint recess; click it and it lifts onto a pane of glass while the rest of the card steps back. Enter presses it back down with a pass of light to say it saved; Escape winds it back.

Pro
Inputs & Controls
3D
Spring
Hover

Play with it

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

Jane Appleseed

Designer

Location

Cupertino, California

Bio

Making tools that get out of the way. Previously at a small studio that made big apps.

Click any text to edit it.

Props

Prop	Type	Default	What it does
autoplay	boolean	false	Edits a field by itself so the lift can be seen, until the visitor touches the card. Never runs under reduced motion and pauses while the card is off screen.
initial	Record<"name" \| "role" \| "location" \| "bio", string>	—	Starting text of the four fields.
onChange	(key: "name" \| "role" \| "location" \| "bio", value: string) => void	—	Called with the field and its new text each time an edit is committed with Enter or by clicking away, if the text changed.

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
Glass Edit 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}"
    }
  }
}
```

Pro
NewSound
Card Reader Verify
Pro
NewSound
Smart Light
Pro
NewSound
Range Calendar
Pro
New
Live Summary

Glass Edit, animated React component

Play with it

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

Glass Edit, animated React component

Play with it

Props

Add it to your project

Set up your project once

Connect the registry with your API key

More inputs & controls