Band Section

Component

About

A horizontal page-section wrapper that sets its own background ground (raised, sunken, brand, wash, deep), an optional diagonal cut or grain/texture overlay, and a centered content rail so page sections keep a consistent readable measure.

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

Code

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

Usage.tsx

import Band from "@/components/ui/band";

export default function BandDemo() {
  return (
    <div className="w-full">
      <Band ground="base" size="sm">
        <h2 className="text-2xl font-semibold text-foreground">Base ground</h2>
        <p className="mt-2 max-w-prose text-sm text-muted-foreground">
          A band sitting directly on the page: no fill, no texture, just the
          rail that holds content to a readable measure.
        </p>
      </Band>

      <Band ground="raised" size="sm" texture="rake">
        <h2 className="text-2xl font-semibold text-foreground">
          Raised ground, rake texture
        </h2>
        <p className="mt-2 max-w-prose text-sm text-muted-foreground">
          A card-like surface above the page, with a faint diagonal texture
          layered under the copy.
        </p>
      </Band>

      <Band ground="sunken" size="sm">
        <h2 className="text-2xl font-semibold text-foreground">
          Sunken ground
        </h2>
        <p className="mt-2 max-w-prose text-sm text-muted-foreground">
          An inset well, used for secondary panels and asides.
        </p>
      </Band>

      <Band ground="wash" size="sm" grain>
        <h2 className="text-2xl font-semibold text-foreground">
          Wash ground with grain
        </h2>
        <p className="mt-2 max-w-prose text-sm text-muted-foreground">
          A soft brand-tinted wash with a fine grain layered over it, for
          marketing surfaces.
        </p>
      </Band>

      <Band ground="brand" size="md" threshold>
        <h2 className="text-2xl font-semibold">Brand ground with threshold</h2>
        <p className="mt-2 max-w-prose text-sm opacity-80">
          A filled brand surface with the 40 degree cut drawn along its edge.
        </p>
      </Band>

      <Band ground="deep" size="md">
        <h2 className="text-2xl font-semibold">Deep ground</h2>
        <p className="mt-2 max-w-prose text-sm opacity-80">
          A dark counterpart to sunken, for sections of the page that need more
          weight.
        </p>
      </Band>
    </div>
  );
}