Deep Press Button

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

# Install and place "button-045" (Deep Press Button) from VibeUI

## 1. Install first — do not skip, do not recreate
Run this exact command before writing any code:
npx shadcn@latest add https://vibeui.ru/r/button-045.json

Registry item: https://vibeui.ru/r/button-045.json
Installs to: components/vibeui/button-045.tsx (the exact path follows this project's components.json aliases).
npm dependencies: none.
Registry dependencies: none.

Install it from the registry. Do not recreate it from the description,
do not substitute a similar component from another library, and do not
rewrite it to match the project's existing style.

## 2. What it is
A real key travel: depth comes from a hard bottom edge, and on press the button drops by exactly that height without nudging its neighbours.

A button with real travel. A hard, unblurred edge sits beneath it — not a shadow but the side of a keycap; a light inset highlight on top adds the plastic. On press the edge collapses and the button drops by its height: the total stays constant, so neighbouring elements never shift. Zero dependencies, one file.

## 3. How to use it
import { Button045 } from "@/components/vibeui/button-045"

<Button045 depth={5} onClick={submit}>Press me</Button045>

Read the installed file for the full prop list.

## 4. Where to place it
This is a small inline component. Put it exactly where the user asked,
inside the existing markup. Do not create a new page, section or
wrapper for it. If a similar control already sits in that spot,
replace it instead of adding a second one.

Placement: ___
(The user fills this line in. If it is still blank, ask where to put it
instead of guessing.)

## 5. Keep exactly as installed
- the equality of the travel and the edge height: if they diverge, pressing the button starts moving its neighbours
- the unblurred bottom edge — a blurred shadow gives float, not the side of a keycap
- the inset highlight on top: without it the plastic reads as a flat fill
- the short .08s transition: a long press animation feels like input lag
- the depth variable as the single source of depth — the same value drives the shift
- the darker edge relative to the face: an identical colour kills the volume

## 6. You may change
- the label
- the travel depth through the depth prop, in pixels
- the face colour through the accent prop
- the onClick handler and the rest of the native button props
- the edge colour through the --vibeui-button-045-edge variable in the style block

## 7. Rules
- Do not set depth above 10px: the button starts to look like a box and the travel feels sluggish.
- Remember the bottom spacing of the neighbours: the edge takes room, and an element placed flush will cover it.
- Do not make the edge colour transparent — that removes the very volume the component exists for.
- Do not lift the CSS variables into globals.css: the component has to stay a single file.

## 8. Verify
- it renders with no console errors;
- it looks like the preview on the VibeUI page you copied this from;
- if it does not, you changed something listed in section 5 — put it back.