ComponentsPower Off Slide

Power Off Slide

Inspired by the power off animation of iPhones, this component allows the user to slide to power off the device.

Slide to power off

Code

Install with shadcn Beta

Terminal

npx shadcn@latest add "https://smoothui.dev/r/power-off-slide.json"

Or install the demo

Terminal

npx shadcn@latest add "https://smoothui.dev/r/power-off-slide-demo.json"

Add the CSS

global.css

@layer utilities {
  .loading-shimmer {
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    animation-delay: 0.5s;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-name: loading-shimmer;
    background: var(--text-quaternary)
      gradient(
        linear,
        100% 0,
        0 0,
        from(var(--text-quaternary)),
        color-stop(0.5, var(--text-primary)),
        to(var(--text-quaternary))
      );
    background: var(--text-quaternary) -webkit-gradient(
        linear,
        100% 0,
        0 0,
        from(var(--text-quaternary)),
        color-stop(0.5, var(--text-primary)),
        to(var(--text-quaternary))
      );
    background-clip: text;
    -webkit-background-clip: text;
    background-repeat: no-repeat;
    background-size: 50% 200%;
    display: inline-block;
  }

  .loading-shimmer {
    background-position: -100% top;
  }
  .loading-shimmer:hover {
    -webkit-text-fill-color: var(--text-quaternary);
    animation: none;
    background: transparent;
  }

  @keyframes loading-shimmer {
    0% {
      background-position: -100% top;
    }

    to {
      background-position: 250% top;
    }
  }
}

How to use

Demo.tsx

"use client"

import React, { useState } from "react"

import PowerOffSlide from "@/components/smoothui/ui/PowerOffSlide"

const PowerOffSlideDemo = () => {
  const [poweredOff, setPoweredOff] = useState(false)

  return (
    <div className="flex flex-col items-center gap-4">
      <PowerOffSlide
        label="Slide to power off"
        duration={1500}
        onPowerOff={() => setPoweredOff(true)}
      />
    </div>
  )
}

export default PowerOffSlideDemo

Props

Prop	Type	Description
onPowerOff?	() => void	Callback fired when the power-off is triggered.
label?	string	Customizable slide label.
className?	string	Optional additional class names for the root container.
duration?	number	Duration of the power-off animation in milliseconds.
disabled?	boolean	If true, disables the slider.

App Download Stack

Inspired by Family.co and the example by Jenson Wong, this component presents a stack of apps, allowing users to open the stack, select the apps they want, and download them.

User Account Avatar

Component that displays a user's avatar and allows the user to edit their profile information and order history.