# Slice Gallery: Project Covers

> An architecture studio's selected work. Move across the row: a slice opens once the pointer settles, so a quick sweep doesn't make the row ripple. Each project's strip warms to its own color, and the details carry a link.

A shadcn/ui block from the [@keyframeui](https://keyframeui.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/slice-gallery-demo).

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/slice-gallery-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/keyframeui/slice-gallery-demo-light-a985da0d01ad0c03.png
- Registry item: https://keyframeui.com/r/slice-gallery-demo.json
- Categories: gallery, hover, layout
- Listed: 2026-10-14, source last changed 2026-10-15

## Install

```bash
npx shadcn@latest add https://keyframeui.com/r/slice-gallery-demo.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://keyframeui.com/r/slice-gallery.json`

## Notes from the registry

Live preview, examples and props: https://keyframeui.com/components/slice-gallery#slice-gallery-demo

## Files

### `registry/demos/slice-gallery-demo.tsx`

```tsx
import { SliceGallery, SliceGalleryItem } from "@/components/ui/slice-gallery";

const projects = [
  {
    title: "Casa Alba",
    year: "2025",
    kind: "Private house",
    place: "Comporta",
    text: "A low house of lime and pine that opens to the dunes on three sides.",
    photo: "1600585154340-be6161a56a0c",
    accent: "#f2c48d",
  },
  {
    title: "Hollow Pavilion",
    year: "2024",
    kind: "Gallery",
    place: "Copenhagen",
    text: "Folded white planes that pull daylight down into the rooms below.",
    photo: "1487958449943-2429e8be8625",
    accent: "#bcd7ff",
  },
  {
    title: "Linden Studio",
    year: "2023",
    kind: "Showroom",
    place: "Berlin",
    text: "A furniture maker's floor, lit like the workshop next door.",
    photo: "1524758631624-e2822e304c36",
    accent: "#e9e1cf",
  },
  {
    title: "Black Barn",
    year: "2022",
    kind: "Holiday house",
    place: "Gotland",
    text: "Tarred timber outside, pale ash inside, and one long window to the sea.",
    photo: "1600585154526-990dced4db0d",
    accent: "#ffb37a",
  },
  {
    title: "Atelier Nine",
    year: "2021",
    kind: "Apartment",
    place: "Milan",
    text: "A ninth-floor flat reworked around a single oak table.",
    photo: "1618219908412-a29a1bb7b86e",
    accent: "#d8c3a0",
  },
];

const photo = (id: string) =>
  `https://images.unsplash.com/photo-${id}?auto=format&fit=crop&w=1000&h=1000&q=80`;

const slug = (title: string) => title.toLowerCase().replace(/\s+/g, "-");

export function SliceGalleryDemo() {
  return (
    <section className="w-full max-w-5xl">
      <div className="mb-6 flex items-end justify-between gap-4">
        <div>
          <p className="font-mono text-xs tracking-widest text-zinc-500 uppercase">Selected work</p>
          <h3 className="mt-2 text-2xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">
            Five buildings, five quiet rooms
          </h3>
        </div>
        <p className="hidden font-mono text-xs text-zinc-500 sm:block">2021–2025</p>
      </div>

      <SliceGallery className="h-[34rem] sm:h-[30rem]">
        {projects.map((project) => (
          <SliceGalleryItem
            key={project.title}
            title={project.title}
            label={project.year}
            image={photo(project.photo)}
            accent={project.accent}
          >
            <p className="text-sm text-white/70">
              {project.kind} · {project.place}
            </p>
            <p className="mt-1 max-w-xs text-[15px] leading-snug text-pretty text-white/90">
              {project.text}
            </p>
            <a
              href={`#${slug(project.title)}`}
              className="mt-3 inline-flex items-center gap-1.5 rounded text-sm font-medium text-white underline-offset-4 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-white/70"
            >
              View project <span aria-hidden>→</span>
            </a>
          </SliceGalleryItem>
        ))}
      </SliceGallery>
    </section>
  );
}
```