Expose Overview: React + Tailwind Component

One click shrinks every section of the page into a thumbnail overview with FLIP; click a thumbnail to zoom back in, giving the page a spatial navigation map.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/expose-overview.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Overview columnscolumns

Thumbnail gapgap

Section heightheight

240

Show the toolbartoolbar

Overview open initiallydefaultOpen

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<ExposeOverview/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/expose-overview.en.json?t=<install token>"

Or, once registries are configured in components.json, install it as @webberui/expose-overview.

Wrap several ExposeSections in an ExposeOverview, where each section is one full-screen block. The "Overview" button in the toolbar shrinks every section into a thumbnail grid, and clicking any thumbnail zooms back into that section.

import { ExposeOverview, ExposeSection } from "@/components/ui/expose-overview";

<ExposeOverview height={320} columns={3} defaultActiveId="cover">
  <ExposeSection id="cover" label="Cover">
    <div className="flex h-full w-full items-center justify-center bg-violet-500 text-white">
      Cover
    </div>
  </ExposeSection>
  <ExposeSection id="features" label="Features">
    <div className="flex h-full w-full items-center justify-center bg-sky-500 text-white">
      Features
    </div>
  </ExposeSection>
  <ExposeSection id="pricing" label="Pricing">
    <div className="flex h-full w-full items-center justify-center bg-emerald-500 text-white">
      Pricing
    </div>
  </ExposeSection>
</ExposeOverview>

Controlled overview

Both open / onOpenChange and activeId / onActiveChange can be controlled, making it easy to sync with an external button or router state.

const [open, setOpen] = React.useState(false);
const [active, setActive] = React.useState("cover");

<ExposeOverview
  open={open}
  onOpenChange={setOpen}
  activeId={active}
  onActiveChange={setActive}
>
  {/* ExposeSection ... */}
</ExposeOverview>

Props

ExposeOverview

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled: whether the thumbnail overview is open
`defaultOpen`	`boolean`	`false`	Initial open state in uncontrolled mode
`onOpenChange`	`(open: boolean) => void`	—	Fires when the open state changes
`activeId`	`string`	—	Controlled: the id of the currently focused section
`defaultActiveId`	`string`	first section	Initial focused section id in uncontrolled mode
`onActiveChange`	`(id: string) => void`	—	Fires when the focused section changes
`columns`	`number`	`3`	Number of columns in the overview grid (2–6), which also sets the thumbnail scale
`gap`	`number`	`12`	Gap between overview thumbnails (px)
`height`	`number`	`420`	Height of each section (one screenful) in px
`toolbar`	`boolean`	`true`	Whether to show the built-in toolbar (section name plus overview toggle)

ExposeSection

Prop	Type	Default	Description
`id`	`string`	—	Unique key, used for focus, thumbnail pairing, and navigation
`label`	`string`	`id`	Display name, used in the toolbar, the thumbnail label, and the aria-label
`children`	`React.ReactNode`	—	Section content, scaled proportionally between the full and thumbnail sizes

How it works

Proportional thumbnails: content is always rendered at "screen width × screen height", and in overview mode the whole block gets transform: scale(1 / columns) — so a thumbnail is a true proportional reduction of the real content, never distorted or reflowed.
Synchronized FLIP: in reading mode all the sections are absolutely stacked at the same screen position, and opening the overview flies each one to its own thumbnail slot with a layout animation; selecting a thumbnail zooms it back to fill the screen in reverse.
Navigation dots: with two or more sections, navigation dots appear below the toolbar so you can switch the focused section directly in reading mode; they fade out automatically when the overview opens.

Accessibility

The toolbar toggle carries aria-pressed; thumbnails have native button semantics, focusable with Tab and selected with Enter / Space to zoom in.
In reading mode the arrow keys (← → ↑ ↓) switch the focused section, and Esc closes the overview.
Sections that are neither focused nor expanded are marked aria-hidden with pointer events disabled, so only the current screen is read out.
When the user has "reduce motion" enabled at the system level, the scaling and movement switch instantly and the FLIP animation is not played.

Expose Overview