Glass Tile

Playground

Edit the props live and copy the config.

<GlassTile selected={selected === i} refract={false} onClick={...}>
  {thumbnail}
</GlassTile>

Install

npx shadcn@latest add https://websiteglass.com/r/glass-tile.json

Usage

import { GlassTile } from '@/components/ui/glass-tile';

<div className="grid grid-cols-4 gap-2.5">
  {items.map((item, i) => (
    <GlassTile
      key={item.id}
      selected={selected === i}
      onClick={() => setSelected(i)}
      aria-label={item.name}
    >
      {item.thumbnail}
    </GlassTile>
  ))}
</div>

Props

All native <button> props are forwarded.

Performance

GlassTile is built for grids of hundreds of cells. By default each tile is a plain CSS backdrop-blur surface with no per-cell SVG filter and no ResizeObserver, so a large picker stays smooth. The full Glass lens engine is deliberately not used per cell — it sets up a displacement filter and observer per instance, which doesn't scale.

For small grids where you want the real bending effect, set refract. That upgrades the tile to a GlassLens (with a per-tile observer to size it), so use it only where the cell count is low.