Block UI

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.

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

export default function BlockUiStaticDemo() {
  return (
    <BlockUI blocked>
      <p style={{ padding: "var(--bs-padding-lg)" }}>
        Draft saved a moment ago.
      </p>
    </BlockUI>
  );
}