Layer

Component

About

A surface wrapper that automatically steps its background between base, raised and sunken shades as it nests, so a panel inside a panel reads as deeper without being told its depth.

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

Code

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

Usage.tsx

import { Layer } from "@/components/ui/layer";

export default function LayerDemo() {
  return (
    <div className="w-full h-full min-h-[480px] flex items-center justify-center p-10 bg-background text-foreground">
      <Layer
        as="section"
        depth={0}
        className="w-full max-w-md rounded-xl border border-border p-6 space-y-4"
      >
        <div className="space-y-1">
          <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
            Claim
          </p>
          <p className="text-sm font-medium">
            Churn dropped 18% after the onboarding redesign shipped.
          </p>
        </div>

        <Layer
          as="div"
          className="rounded-lg border border-border p-4 space-y-3"
        >
          <div className="space-y-1">
            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
              Evidence
            </p>
            <p className="text-sm text-muted-foreground">
              Weekly churn across cohorts started before and after the redesign
              shipped, four weeks on either side.
            </p>
          </div>

          <Layer as="div" className="rounded-md border border-border p-3">
            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
              Source
            </p>
            <p className="text-xs text-muted-foreground mt-1">
              product_analytics.churn_weekly — query run 2024-03-02
            </p>
          </Layer>
        </Layer>
      </Layer>
    </div>
  );
}