Back to components
Lock Toggle React component

What is this?

A pill with a padlock and a short label. Locking drops the shackle shut and turns the whole pill black with “Locked”; unlocking swings it open again. It only reports the state, so wire it to your own logic. Swap the labels, then drop it into sharing settings or an editor toolbar.

Component

Lock Toggle

A pill with a padlock and a short label. Locking drops the shackle shut and turns the whole pill black with “Locked”; unlocking swings it open again. It only reports the state, so wire it to your own logic. Swap the labels, then drop it into sharing settings or an editor toolbar.

Checking access…
Live Preview

Verified Technical Spec

Animation
CSS / Tailwind
Reduced motion
Verified
Keyboard focus
Verified
Compatibility
Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible

Included

  • Copy source into Cursor or Claude for agent install
  • Finished React · TypeScript · Tailwind CSS UI

Dependencies

  • React 19.0.0
  • Typescript 5.7.2
  • Tailwindcss 3.4.16

Tech Stack

  • React
  • TypeScript
  • Tailwind CSS

Version 1.0.0