# Slide to deploy
> Slide-to-deploy control whose pixel trail heats up as you drag; releasing past 90% bursts, runs a deploy scan and shows Live.
- Element: `<px-deploy>`
- React: `import { PxDeploy } from "@/components/lumesec/px-deploy"`
- Collection: Pixel Lab (https://elements.lumesec.ai/components/pixel-lab)
- Registry item: https://elements.lumesec.ai/r/px-deploy.json
- Page: https://elements.lumesec.ai/components/pixel-lab/deploy



Live preview: https://elements.lumesec.ai/view/px-deploy

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-deploy.js"></script>

<px-deploy></px-deploy>
```

## Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

## Installation

```bash
npx shadcn@latest add @lumesec/px-deploy
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/px-deploy.json
```

## Usage

React:

```tsx
import { PxDeploy } from "@/components/lumesec/px-deploy";

export function Example() {
  return (
    <PxDeploy />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-deploy.js"></script>

<px-deploy></px-deploy>
```

## Behaviour

The Ultracode trail turned into a commit gesture. Sliding charges a pixel trail that heats up and starts to boil near the end. Release early and it drains back; reach the end and it bursts, scans and goes live.

## API reference

### Attributes

| Attribute | React prop | Type     | Default   | Description                                                                     |
| --------- | ---------- | -------- | --------- | ------------------------------------------------------------------------------- |
| `version` | `version`  | `string` | `v2.14.0` | Version shown in the "Live · \<version>" label. Read when the deploy goes live. |

### Events

Events bubble and cross the shadow boundary unless the description says otherwise.

| Event    | React prop | Detail | Description                                                        |
| -------- | ---------- | ------ | ------------------------------------------------------------------ |
| `deploy` | `onDeploy` | `{}`   | Fires when the slide is committed and the deploy sequence starts.  |
| `live`   | `onLive`   | `{}`   | Fires 1.6 seconds after `deploy`, when the label switches to Live. |

### Methods

Call them on the element, for example through a React ref.

| Method     | Description                                                                |
| ---------- | -------------------------------------------------------------------------- |
| `commit()` | Runs the deploy sequence immediately, as if the thumb had reached the end. |

### Properties

| Property              | Type     | Description                            |
| --------------------- | -------- | -------------------------------------- |
| `version` (read-only) | `string` | The `version` attribute, or `v2.14.0`. |

## Keyboard

| Keys          | Action                                              |
| ------------- | --------------------------------------------------- |
| Enter / Space | Slide the thumb to the end on its own and deploy.   |
| ArrowRight    | Move the thumb 10% along; reaching the end deploys. |

## Accessibility

* The thumb is focusable with `role="slider"`, `aria-label="Slide to deploy"`, `aria-valuemin="0"`, `aria-valuemax="100"` and a live `aria-valuenow`.
* The track label is an `aria-live="polite"` region that announces "Deploying…" and "Live · \<version>".
* Keyboard and pointer input are ignored while a deploy is running or showing Live.
* Reduced motion: an early release returns the thumb at once, the trail does not jitter, the label shimmer stops and the burst, sparks and thumb pop are skipped.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--border`, `--card`, `--foreground`, `--lumesec`, `--lumesec-success`, `--muted` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-border`, `--ui-fg`, `--ui-muted`, `--ui-ok`, `--ui-surface` and `--ui-track`.

## Notes

* The component does not deploy anything; listen for `deploy` and `live` to drive real work.
* The host carries `data-state="deploying"` and then `data-state="live"`; it returns to idle 2.6 seconds after going live.
* The track is 56px tall and fills the host's width.