Browse components
Dome Gallery
Photos tiled across the inside of a sphere that you drag to look around, with inertia and click-to-enlarge.
Installation
npx shadcn@latest add @glint-ui/dome-galleryFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/dome-gallery.json
Usage
import { DomeGallery } from "@/components/ui/dome-gallery";
<div style={{ height: 600 }}>
<DomeGallery images={["/1.jpg", "/2.jpg", "/3.jpg"]} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| images | ReactNode | — | Array of image URLs (repeated across the dome). |
| radius | number | 560 | Sphere radius in px. |
| columns | number | 22 | Tiles around the circle. |
| rows | number | 5 | Rows of tiles. |
| gap | number | 0.1 | Space between tiles (fraction of size). |
| autoRotate | number | 4 | Idle rotation in deg/s. |
| dragSensitivity | number | 0.18 | Degrees per px dragged. |
| maxPitch | number | 22 | Max up/down tilt in degrees. |
| tileRadius | number | 14 | Tile corner radius in px. |
| className | string | — | Extra classes for the root element. |