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.
Playground
Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.
<PxDeploy version="v2.14.0" />
Installation
pnpm dlx shadcn@latest add @lumesec/px-deployFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/px-deploy.jsonUsage
import { PxDeploy } from "@/components/lumesec/px-deploy";
export function Example() {
return (
<PxDeploy />
);
}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
versionReact propversionTypestringDefaultv2.14.0Version 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.
deployReact proponDeployDetail{}Fires when the slide is committed and the deploy sequence starts.
liveReact proponLiveDetail{}Fires 1.6 seconds after deploy, when the label switches to Live.
Methods
Call them on the element, for example through a React ref.
commit()Runs the deploy sequence immediately, as if the thumb had reached the end.
Properties
version (read-only)TypestringThe 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 livearia-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.
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
deployandliveto drive real work. - The host carries
data-state="deploying"and thendata-state="live"; it returns to idle 2.6 seconds after going live. - The track is 56px tall and fills the host's width.
Related
Was this page helpful?