sarat-asymmetrica

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 TileBandDemo() {
  return (
    <div className="w-full max-w-xl mx-auto p-10 bg-[#FBF8EE]">
      <p className="mb-2 text-[11px] font-medium uppercase tracking-[0.08em] text-[#6b5a3e]">
        Azulejo, as a border
      </p>
      <TileBand register="warm" seed="azulejo" />
    </div>
  );
}

More by sarat-asymmetrica

View all
  • Hand-drawn Radio Group

    Hand-drawn Radio Group

    1
  • Toggle

    Toggle

  • Kolam &amp; Chai Progress

    Kolam &amp; Chai Progress

  • Hand-Inked Status Badge

    Hand-Inked Status Badge

  • File Drop

    File Drop

  • Field Note

    Field Note