Browse components
Infinite Menu
Menu items wrapped around a sphere you drag to spin; it settles on the disc facing you and reveals its title.
Installation
npx shadcn@latest add @glint-ui/infinite-menuFirst 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/infinite-menu.json
Usage
import { InfiniteMenu } from "@/components/ui/infinite-menu";
<div className="h-[32rem]">
<InfiniteMenu items={[{ image: "/a.jpg", title: "Aurora", description: "Northern lights", href: "/aurora" }]} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of { image, title, description?, href? }. |
| count | number | 42 | Discs on the sphere; items repeat to fill it. |
| itemSize | number | 84 | Disc diameter in px. |
| autoRotate | boolean | false | Slowly spin while idle instead of settling. |
| className | string | — | Extra classes for the root element. |