Shared background

Preview

Installation

Install the local ghost-kit source bundle while the registry runs at localhost:3110. It contains this component and its source dependencies. Prepare the local registry first so token dependencies also resolve locally.

npx shadcn@latest add http://localhost:3110/r/ghost-kit.json

Usage

1234567891011121314151617181920import { useState } from "react";
import { Button } from "@/components/ui/button";
import { SharedBackground } from "@/components/ui/shared-background";

export function MailFolders() {
  const [folder, setFolder] = useState("Inbox");
  return (
    <>
      <SharedBackground as="ul" aria-label="Mail folders" inset={0}>
        {["Inbox", "Sent"].map(name => (
          <li key={name}>
            <Button variant="ghost" aria-current={folder === name ? "page" : undefined}
              onClick={() => setFolder(name)}>{name}</Button>
          </li>
        ))}
      </SharedBackground>
      <section aria-label={folder}>{folder}</section>
    </>
  );
}

Use semantic rows and existing controls. Keep the selected folder and its content in the consuming application.

Structure

Examples

Surface feedback

Move one shared surface to the hovered or focused folder. Choosing a folder changes its visible content.

Line feedback

Move the line to the hovered or focused folder. When feedback ends, return it to the selected folder.

Selected line with shared feedback

Keep the selected folder marked by a line while a separate surface follows hover or focus. The folder content changes only when a folder is chosen.

API reference