Pull Cord Lamp

Component 29

About

A pendant lamp that is a switch. Pull the acorn: the detent resists and snaps, the filament warms from dull red to white and the lamp sways on its cable, with its light thrown on the wall behind. Dome, tube or bare-holder shade, clear or frosted bulb. Its metal is drawn from your shadcn theme and follows .dark. MIT. More like it: tactileui.dev

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Pull Cord Lamp to your project and fits it to your theme.

Code

How Pull Cord Lamp is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { useState } from "react";
import { PullCordLamp } from "@/components/ui/pull-cord-lamp";

export default function PullCordDemo() {
  const [on, setOn] = useState(true);
  return (
    <div className="relative min-h-screen w-full overflow-hidden bg-background text-foreground">
      <div className="absolute inset-0">
        <PullCordLamp size="fill" defaultOn onChange={setOn} label="Reading light" />
      </div>
      <p className="absolute inset-x-0 bottom-7 m-0 text-center text-[15px] font-medium text-muted-foreground">
        Pull the acorn. The lamp is {on ? "on" : "off"}.
      </p>
    </div>
  );
}