# Bento Closer Look
A feature spotlight that pairs an auto-advancing accordion of features with a matching cross-fading image.
Bento Closer Look is an open-source block from suiss/ui for React. The @esuiss/ui CLI copies its source into your project, so you own the code.
Source: https://ui.suiss.app/docs/blocks/bento-closer-look
**React**
**Example**
```tsx title="components/blocks/bento-closer-look.tsx"
"use client"
import { PlusIcon } from "@phosphor-icons/react"
import * as React from "react"
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion"
const photo = (id: string) =>
`https://images.unsplash.com/photo-${id}?w=1000&q=80&auto=format&fit=crop`
type Feature = {
title: string
description: string
image: string
alt: string
}
const features: [Feature, ...Feature[]] = [
{
title: "Camera Control",
description:
"A faster way to take photos. Slide to zoom, press lightly to focus.",
image: photo("1714972384975-fbd4f19b1bb3"),
alt: "An orange phone on a warm gradient",
},
{
title: "Fusion camera",
description:
"Three rear cameras capture detail at every angle with 48 MP resolution.",
image: photo("1604677209244-6569d050557a"),
alt: "A camera lens lit in red and pink",
},
{
title: "Aluminum body",
description: "A unibody design that spreads heat better and weighs less.",
image: photo("1664883410931-2edffc8be5e6"),
alt: "A silver phone on a light grey background",
},
{
title: "New colors",
description: "Cosmic Orange, Deep Blue and Silver.",
image: photo("1633596683562-4a47eb4983c5"),
alt: "Layered orange paper waves",
},
]
export function BentoCloserLook() {
const [active, setActive] = React.useState(features[0].title)
const [auto, setAuto] = React.useState(true)
React.useEffect(() => {
if (!auto) return
const timer = window.setInterval(() => {
setActive((current) => {
const index = features.findIndex((item) => item.title === current)
return features[(index + 1) % features.length]?.title ?? current
})
}, 4000)
return () => window.clearInterval(timer)
}, [auto])
return (
)
}
```
A feature spotlight with a list of features on one side and a photo on the other that cross-fades to match the open item. The list advances on its own every four seconds until someone opens an item, then stays put. On mobile the photo moves above the list. Use it to walk through a handful of product features without a carousel.
## Installation
### CLI
```bash title="Terminal"
npx shadcn@latest add @esuiss/bento-closer-look
```
Works in any project with a `components.json`. See [Installation](https://ui.suiss.app/docs/installation#add-components) for the one-line registry setup. Or use the suiss/ui CLI:
```bash title="Terminal"
npx @esuiss/ui@latest add blocks bento-closer-look
```
### Manual
1. Install the dependencies:
```bash title="Terminal"
npm install @phosphor-icons/react
```
2. Add the pieces it builds on: [Accordion](https://ui.suiss.app/docs/components/accordion).
3. Copy the source into `components/blocks/bento-closer-look.tsx`:
```tsx title="components/blocks/bento-closer-look.tsx"
"use client"
import { PlusIcon } from "@phosphor-icons/react"
import * as React from "react"
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion"
const photo = (id: string) =>
`https://images.unsplash.com/photo-${id}?w=1000&q=80&auto=format&fit=crop`
type Feature = {
title: string
description: string
image: string
alt: string
}
const features: [Feature, ...Feature[]] = [
{
title: "Camera Control",
description:
"A faster way to take photos. Slide to zoom, press lightly to focus.",
image: photo("1714972384975-fbd4f19b1bb3"),
alt: "An orange phone on a warm gradient",
},
{
title: "Fusion camera",
description:
"Three rear cameras capture detail at every angle with 48 MP resolution.",
image: photo("1604677209244-6569d050557a"),
alt: "A camera lens lit in red and pink",
},
{
title: "Aluminum body",
description: "A unibody design that spreads heat better and weighs less.",
image: photo("1664883410931-2edffc8be5e6"),
alt: "A silver phone on a light grey background",
},
{
title: "New colors",
description: "Cosmic Orange, Deep Blue and Silver.",
image: photo("1633596683562-4a47eb4983c5"),
alt: "Layered orange paper waves",
},
]
export function BentoCloserLook() {
const [active, setActive] = React.useState(features[0].title)
const [auto, setAuto] = React.useState(true)
React.useEffect(() => {
if (!auto) return
const timer = window.setInterval(() => {
setActive((current) => {
const index = features.findIndex((item) => item.title === current)
return features[(index + 1) % features.length]?.title ?? current
})
}, 4000)
return () => window.clearInterval(timer)
}, [auto])
return (
)
}
```
4. Update the import paths to match your project.
## Usage
```tsx
import { BentoCloserLook } from "@/components/blocks/bento-closer-look"
```
```tsx
```
Edit the `features` array; each entry has a title, description, image and alt text. Change the 4000 ms interval or the heading in the component. Nothing needs wiring to a backend.
## Notes
The automatic rotation keeps running under reduced motion until the user opens an item, so drop the interval if that matters for your audience. Photos are Unsplash placeholders.
))}