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	Default
onPowerOff?	() => void	-
label?	string	-
className?	string	-
duration?	number	-
disabled?	boolean	-

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.