Tile Band

Component 1

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 TileBandMajolicaDivider() {
  return (
    <div className="w-full max-w-xl mx-auto p-10 bg-[#FBF8EE] space-y-3">
      <p className="text-[11px] font-medium uppercase tracking-[0.08em] text-[#6b5a3e]">
        Majolica
      </p>
      <TileBand register="warm" tones="majolica" seed="majolica" />
      <p className="text-[11px] font-medium uppercase tracking-[0.08em] text-[#6b5a3e] pt-4">
        A divider: the hr is the separator
      </p>
      <TileBand register="warm" seed="divider">
        <hr />
      </TileBand>
    </div>
  );
}