# Arc carousel

A shadcn/ui portfolio block for studios that show work as a series: project names turn on a curved dial while each project's image changes in step.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available for the docs, pricing and about pages: append `.md` to the URL or send an `Accept: text/markdown` header (the home page answers the header too). An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## At a glance

- **Good for:** Architecture and design studio websites; Portfolio and selected work pages; Collection and campaign showcases
- **Category:** Portfolio, Marketing · **Type:** Gallery · **Style:** Motion, Minimal, Dark mode
- **See it:** [Live preview](https://www.craftui.space/docs/blocks/arc-carousel) · [Video](https://pub-52b0d9cec7c64f638ba3f33a29718fa6.r2.dev/Videos_product_cards/gallery-arc-carousel.1e4c795b.mp4)

## Install

```bash
pnpm dlx shadcn@latest add https://www.craftui.space/r/arc-carousel.json
```

This is a paid item (BLK-0002): the install needs a craftUI plan or a purchase of it. Signed in, the docs page gives your personal install command. Plans: https://www.craftui.space/pricing

## Usage

```tsx
import ArcCarousel from "@/components/blocks/arc-carousel";

export default function Page() {
  return <ArcCarousel />;
}
```

With no props it renders with demo content; pass your own through the props below.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `ArcCarouselItem[]` | `built-in demo content` | The items, in order: each a label on the dial and the image shown while it's active. Five to eight read best. Defaults to `arcCarouselItems`, an architecture studio's selected projects. |
| `dwell` | `number` | `2` | Seconds the dial holds on each item before stepping on. Defaults to 2. |
| `spring` | `"soft" \| "snappy" \| "bouncy"` | `"snappy"` | How the dial steps: "soft" barely overshoots, "snappy" a little, "bouncy" visibly. Defaults to "snappy". |
| `loop` | `boolean` | `true` | Whether the dial wraps round from the last item to the first. With `false` it has ends: a drag past one gives way less and less and springs back, and autoplay rewinds to the start. Defaults to `true`. |
| `dialLabel` | `string` | `"Selected projects"` | What the dial is called for screen readers, e.g. "Collections". Defaults to "Selected projects". |
| `linkText` | `string` | `"View project"` | The words on an item's link, shown over its image on hover and focus and read with the item's name: "View project: Timber House". Defaults to "View project". |

It also accepts every `<div>` attribute (`className`, `id`, `aria-*` and so on).

### `ArcCarouselItem`

| Field | Type | Description |
| --- | --- | --- |
| `id` (required) | `string` | Unique id: the dial and the image key on it. |
| `label` (required) | `string` | The item's name on the dial, one to three words: "Timber House". |
| `meta` | `string` | A short note after the label, such as a year: "2025". Optional. |
| `image` (required) | `string` | URL of the item's image, shown at 3:2 beside the dial. 1200px wide is plenty. |
| `alt` (required) | `string` | What the image shows, for screen readers. |
| `href` | `string` | Where the item leads: the image becomes a link to it, and tapping the active label (or pressing Enter on the dial) opens it. Leave it out for no link. |

## Files

The install adds:

- `components/blocks/arc-carousel.tsx`

npm dependencies (installed for you): `motion`.