{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"gallery-grid","type":"registry:block","title":"Gallery Grid","description":"Captioned tile gallery — swap the pattern tiles for real shots.","categories":["gallery"],"dependencies":[],"registryDependencies":[],"css":{"@utility bg-grid-sm":{"background-image":"linear-gradient(to right, color-mix(in oklab, var(--foreground) 4%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--foreground) 4%, transparent) 1px, transparent 1px)","background-size":"24px 24px"},"@utility bg-dots":{"background-image":"radial-gradient(circle, color-mix(in oklab, var(--foreground) 16%, transparent) 1px, transparent 1px)","background-size":"14px 14px"},"@utility bg-stripes":{"background-image":"repeating-linear-gradient(-45deg, color-mix(in oklab, var(--foreground) 5%, transparent) 0 1px, transparent 1px 7px)"}},"files":[{"path":"registry/blocks/gallery-grid.tsx","content":"const tiles = [\n  { name: \"Grid\", className: \"bg-grid-sm\" },\n  { name: \"Dots\", className: \"bg-dots\" },\n  { name: \"Hatch\", className: \"bg-stripes\" },\n  { name: \"Ink\", className: \"bg-foreground\" },\n];\n\n/**\n * Swap the pattern tiles for real screenshots or photos when you have\n * them — the frame, captions and layout stay identical.\n */\nexport default function GalleryGrid() {\n  return (\n    <section className=\"bg-background\">\n      <div className=\"mx-auto w-full max-w-5xl px-6 py-20 sm:py-24\">\n        <div className=\"mb-10 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between\">\n          <div>\n            <h2 className=\"text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n              Built from a small set of rules\n            </h2>\n            <p className=\"mt-2 max-w-md text-muted-foreground\">\n              Four textures carry the whole identity — print, product and\n              site.\n            </p>\n          </div>\n          <p className=\"font-mono text-xs text-muted-foreground tabular-nums\">\n            04 assets\n          </p>\n        </div>\n\n        <div className=\"grid grid-cols-2 gap-4 lg:grid-cols-4\">\n          {tiles.map((tile, index) => (\n            <figure key={tile.name}>\n              <div\n                className={`aspect-square rounded-xl border border-border/60 ${tile.className}`}\n              />\n              <figcaption className=\"mt-2.5 flex items-baseline justify-between\">\n                <span className=\"text-sm font-medium\">{tile.name}</span>\n                <span className=\"font-mono text-xs text-muted-foreground tabular-nums\">\n                  {String(index + 1).padStart(2, \"0\")}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n","type":"registry:block","target":"components/blocks/gallery/gallery-grid.tsx"}]}