Block UI

Component

About

A loading curtain that overlays a region of content with a frosted-paper mask and a spinner while it waits on an async action, keeping the covered content's layout intact.

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

Code

How Block UI is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { BlockUI } from "@/components/ui/block-ui";
import { useState } from "react";

export default function BlockUiDemo() {
  const [blocked, setBlocked] = useState(true);
  return (
    <div
      style={{
        display: "grid",
        gap: "var(--bs-gap-md)",
        maxInlineSize: "24rem",
      }}
    >
      <button
        type="button"
        onClick={() => setBlocked(!blocked)}
        style={{
          display: "inline-flex",
          alignItems: "center",
          justifyContent: "center",
          blockSize: "var(--bs-control-height-sm)",
          padding: "0 var(--bs-padding-md)",
          border: "1px solid var(--bs-color-border-strong)",
          borderRadius: "var(--bs-radius-sm)",
          background: "transparent",
          color: "var(--bs-color-text-primary)",
          fontSize: "var(--bs-font-size-sm)",
          cursor: "pointer",
        }}
      >
        {blocked ? "Lift the curtain" : "Draw the curtain"}
      </button>
      <BlockUI blocked={blocked}>
        <div
          style={{
            padding: "var(--bs-padding-lg)",
            border: "1px solid var(--bs-color-border)",
            borderRadius: "var(--bs-radius-md)",
          }}
        >
          Invoices settle every quarter. The ledger holds its shape while the
          curtain is drawn.
        </div>
      </BlockUI>
    </div>
  );
}