Gallery — UI Block

An endless wall of work in 3D that wraps in every direction: drag it and the sheets flex with your speed, click a piece to open it, and leave it alone to drift.

Pro
Gallery sections
1 section

Install

One command adds every section. Pro blocks need your API key in the registry settings.

$ npx shadcn@latest add @nexus-labs/gallery-blocks

Full setup guide

Install the complete Gallery family with its 1 variant. The registry command adds the source files, required utility imports, and npm packages used by this block.

1
Prepare a shadcn project
Use a Next.js project with Tailwind CSS and the @/ alias. If shadcn is not configured yet, run:
```
npx shadcn@latest init
```

Connect the registry with your API key

Replace your components.json with this, or add the registries key to your existing one. Replace YOUR_NEXUS_API_KEY with the key from your Nexus UI dashboard.

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": {
      "url": "https://www.nexus-ui.com/api/registry/{name}",
      "headers": {
        "Authorization": "Bearer YOUR_NEXUS_API_KEY"
      }
    }
  }
}

3
Install the full block family
Run this command from your project root. It installs every variant shown on this page.
```
npx shadcn@latest add @nexus-labs/gallery-blocks
```
4
Files added to your project
The component package installs these block source files:
components/
blocks/
motion-kit/
drift-gallery/
drift-gallery.tsx
5
Copy the example into your page
Switch to the Codetab on the variant you want. On the left you'll see a ready-to-use snippet — copy it and paste it into app/page.tsx:
```
// app/page.tsx
import YourBlock from "@/components/...";

export default function Page() {
  return (
    <main>
      <YourBlock />
    </main>
  );
}
```
The exact import path is shown in the Code tab sidebar for each variant.

1 of 1Pro

Drift Gallery

Spring exhibition

Ten artists, no edges.

Drag anywhere · click to open

More blocks

See the whole wall ›