BeUI Shared Layout Background

Buttons 16

About

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

Code

How BeUI Shared Layout Background is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { ArrowUpRight } from "lucide-react";
import { SharedLayoutBg } from "@/components/ui/beui-dock";

const items = [
  { title: "Inbox", body: "12 unread threads, 3 mentions today." },
  { title: "Drafts", body: "4 posts waiting for a final pass." },
  { title: "Releases", body: "Last shipped 2 days ago, v0.4.1." },
  { title: "Billing", body: "Plan renews on the 1st of next month." },
];

export default function SharedLayoutBgPreview() {
  return (
    <div className="w-full max-w-lg px-2">
      <SharedLayoutBg>
        {items.map((it) => (
          <button
            type="button"
            key={it.title}
            className="group flex flex-col gap-1 px-2 py-3 text-left"
          >
            <div className="flex items-center justify-between gap-3">
              <span className="text-sm font-medium text-foreground">{it.title}</span>
              <ArrowUpRight className="h-3.5 w-3.5 text-muted-foreground transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
            </div>
            <p className="text-sm text-muted-foreground">{it.body}</p>
          </button>
        ))}
      </SharedLayoutBg>
    </div>
  );
}