Tile Band

Component

About

A decorative or dividing strip of hand-painted Goan tile motifs (azulejo blue-and-white or majolica cobalt/lemon/leaf), seeded so the same page always paints the same tiles, with a quiet line-art, warm glazed, or playful touch-reactive register.

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

Code

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

Usage.tsx

import TileBand from "@/components/ui/tile-band";

export default function TileBandVerticalDemo() {
  return (
    <div className="w-full max-w-2xl mx-auto p-10 bg-[#FBF8EE] grid grid-cols-[auto_1fr] gap-6 items-stretch">
      <TileBand
        orientation="vertical"
        register="warm"
        tones="majolica"
        seed="edge"
        style={{ minHeight: "15rem" }}
      />
      <div className="self-center max-w-sm">
        <h3 className="text-lg font-medium text-[#2a241b] mb-2">
          Down the side of a page
        </h3>
        <p className="text-sm text-[#6b5a3e]">
          The same band runs down the page as an edge: it turns every motif a
          quarter so the vines climb, and fits whole tiles to the height.
        </p>
      </div>
    </div>
  );
}