Skip to content
Compositions

QuickView

A centred, near-full-screen dialog that previews one item, typically a product, without leaving the page: a header with the item's name, a muted scrolling body and a footer for its actions. Controlled: the application decides what is shown and when it opens. Escape and a backdrop press close it, and focus returns to the control that opened it, even when a pointer press opened it without focusing that control. Import from "@instruments/materia-ui/compositions/quick-view".

Sage Linen

Usage

import { QuickView, QuickViewBody, QuickViewBodyProps, QuickViewContent, QuickViewContentProps, QuickViewDetails, QuickViewDetailsProps, QuickViewFooter, QuickViewFooterProps, QuickViewHeader, QuickViewHeaderProps, QuickViewLayout, QuickViewLayoutProps, QuickViewMedia, QuickViewMediaProps, QuickViewProps } from "@instruments/materia-ui/compositions/quick-view";

Best practices

  • Keep the last viewed item in state after closing, so the panel does not empty while it animates out.

  • Put the item's name in QuickViewHeader; it is the dialog's accessible name.

  • Offer a way to the full page in the header's actions - a quick view previews, it does not replace the detail page.

  • A panel that docks beside the page (a cart) is a Sidepanel, not a quick view.

Props

QuickView

PropTypeDefaultDescription
open(required)boolean

Whether the quick view is open. The application owns this state.

onOpenChange(required)(open: boolean, eventDetails: import("@base-ui/react").DialogRoot.ChangeEventDetails) => void

Called when Escape, the backdrop or a close control asks to close it.

QuickViewBody

PropTypeDefaultDescription
classNamestring
aria-label(required)string

Defines a string value that labels the current element. Names the scrolling region for assistive tech, e.g. "Product details".

allowOverflowboolean

Allow content to visually overflow the root container.

hideScrollbarboolean

Hide the scrollbar completely while maintaining scroll functionality

viewportClassNamestring

Additional classes for the viewport (scrolling container)

QuickViewContent

PropTypeDefaultDescription
classNamestring
overlayClassNamestring

Extra classes for the overlay behind the dialog.

QuickViewDetails

PropTypeDefaultDescription
refLayoutRef | undefined

Ref to the rendered host, whichever element as selects.

directionLayoutResponsiveValue<FlexDirection>"column"

Main-axis direction. Accepts a per-breakpoint responsive object.

alignLayoutResponsiveValue<FlexAlign>"stretch"

Cross-axis alignment. Accepts a per-breakpoint responsive object.

responsiveModeResponsiveMode"screen"

Whether responsive values resolve against the viewport ("screen") or nearest container ("container").

justifyLayoutResponsiveValue<FlexJustify>"flex-start"

Main-axis distribution. Accepts a per-breakpoint responsive object.

guidelinesbooleanfalse

Show dashed outline guidelines during development.

QuickViewFooter

PropTypeDefaultDescription
refLayoutRef | undefined

Ref to the rendered host, whichever element as selects.

inlinebooleanfalse

Render as inline-flex instead of flex.

directionLayoutResponsiveValue<FlexDirection>"row"

Main-axis direction. Accepts a per-breakpoint responsive object.

gapLayoutResponsiveValue<"base" | "none" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "3xs">

Gap between items, from the spacing scale. Accepts a per-breakpoint responsive object.

alignLayoutResponsiveValue<FlexAlign>"stretch"

Cross-axis alignment. Accepts a per-breakpoint responsive object.

responsiveModeResponsiveMode"screen"

Whether responsive values resolve against the viewport ("screen") or nearest container ("container").

justifyLayoutResponsiveValue<FlexJustify>"flex-start"

Main-axis distribution. Accepts a per-breakpoint responsive object.

wrapLayoutResponsiveValue<FlexWrap>"nowrap"

Wrap behaviour. Accepts a per-breakpoint responsive object.

guidelinesbooleanfalse

Show dashed outline guidelines during development.

QuickViewHeader

PropTypeDefaultDescription
children(required)ReactNode

The item's name: the dialog's accessible name, and its visible title unless hideTitle.

actionsReactNode

Controls before the close button, such as a link to the full page. Use size="lg" buttons so they match the close button.

closeLabelstring"Close quick view"

Accessible name of the close button.

hideTitlebooleanfalse

Keep the title for assistive tech only, when the body already shows the item's name (in its first details card, say).

leadingReactNode

Controls on the leading edge, such as back and forward through viewed items.

refLayoutRef | undefined

Ref to the rendered host, whichever element as selects.

inlinebooleanfalse

Render as inline-flex instead of flex.

directionLayoutResponsiveValue<FlexDirection>"row"

Main-axis direction. Accepts a per-breakpoint responsive object.

gapLayoutResponsiveValue<"base" | "none" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "3xs">

Gap between items, from the spacing scale. Accepts a per-breakpoint responsive object.

alignLayoutResponsiveValue<FlexAlign>"stretch"

Cross-axis alignment. Accepts a per-breakpoint responsive object.

responsiveModeResponsiveMode"screen"

Whether responsive values resolve against the viewport ("screen") or nearest container ("container").

justifyLayoutResponsiveValue<FlexJustify>"flex-start"

Main-axis distribution. Accepts a per-breakpoint responsive object.

wrapLayoutResponsiveValue<FlexWrap>"nowrap"

Wrap behaviour. Accepts a per-breakpoint responsive object.

guidelinesbooleanfalse

Show dashed outline guidelines during development.

QuickViewLayout

PropTypeDefaultDescription
refLayoutRef | undefined

Ref to the rendered host, whichever element as selects.

inlinebooleanfalse

Render as inline-grid instead of grid.

responsiveModeResponsiveMode

Responsive mode: "screen" (viewport) or "container" (container queries).

justifyLayoutResponsiveValue<FlexJustify>

Justify items on the inline axis. Can be responsive.

xGapLayoutResponsiveValue<"base" | "none" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "3xs">

Horizontal gap between items. Can be responsive. Overrides gap on inline axis.

yGapLayoutResponsiveValue<"base" | "none" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "3xs">

Vertical gap between items. Can be responsive. Overrides gap on block axis.

growboolean

When true, columns grow equally to fill available space.

QuickViewMedia

PropTypeDefaultDescription
refLayoutRef | undefined

Ref to the rendered host, whichever element as selects.

Also exports

  • typeQuickViewBodyProps
  • typeQuickViewContentProps
  • typeQuickViewDetailsProps
  • typeQuickViewFooterProps
  • interfaceQuickViewHeaderProps
  • typeQuickViewLayoutProps
  • typeQuickViewMediaProps
  • typeQuickViewProps

Composition

Builds on

Box, Button, Dialog, Flex, Grid, ScrollArea, Stack