Figure

Storybook

Images with captions, in the article frame

A Figure wraps any image (a plain <img> or next/image) in the system's rounded container with an optional caption. Pass an onClick and it becomes zoomable: zoom cursor, hover dim, and keyboard activation for lightboxes.

With caption

Abstract demo cover illustration
A demo cover illustration standing in for a real photograph.

Zoomable

With onClick the figure gains the zoom affordance: in an article layout this opens the lightbox.

Zoomable: click or press Enter to trigger the handler.
tsx
// From the npm package
import { Figure } from 'rift-ds/components/Figure/Figure';

// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/figure.json