Theme
← Blocks
Ecommerce Block family Grid-based shopping experiences

Product Quickviews

Quickview overlays for size, color, and add-to-cart flows without leaving the list page.

Preview

Open in new tab
Quickview overlays

Give collection pages a faster path to purchase.

Quickview patterns package the overlay structure and summary hierarchy for commerce grids.

Card quickview

Lean overlay for price, color, and add-to-cart.

Spec quickview

Adds materials and compact product details.

Color quickview

Swatch-first quickview for fashion or product variants.

Included patterns

• Overlay summary

• Variant selector region

• Fast add-to-cart path

Variants

Card quickview

Compact product quickview for collection grids.

Spec quickview

Shows materials and dimensions in the overlay.

Color quickview

Focuses on swatch and variant selection.

Source

Copy this source into your app and own it. The theme imports are already included.

svelte
<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { Badge, Button, Card, Container, DescriptionList, Grid, Heading, Stack, Text } from '@dryui/ui';
</script>
<Container>
  <Stack gap="xl">
    <Badge variant="outline">Quickview overlays</Badge>
    <Heading level={1}>Give collection pages a faster path to purchase.</Heading>
    <Text as="p">Quickview patterns package the overlay structure and summary hierarchy for commerce grids.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open quickviews</Button>
        <Button variant="outline">Use with product lists</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Card quickview</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Lean overlay for price, color, and add-to-cart.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Spec quickview</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Adds materials and compact product details.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Color quickview</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Swatch-first quickview for fashion or product variants.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Overlay summary</Text>
        <Text as="p">• Variant selector region</Text>
        <Text as="p">• Fast add-to-cart path</Text>
      </Fieldset.Content>
    </Fieldset.Root>
  </Stack>
</Container>