Quick Links

Screenshot

A component for displaying screenshots with proper styling and formatting.

 <Screenshot.Root>
  <Screenshot.Image src="https://images.workoscdn.com/images/278132d5-8494-4a3e-b253-ee50cfac93c0.png?auto=format&fit=max&w=3840" />
</Screenshot.Root>

API Reference

This component is based on the div element and supports common margin props m, mx, my, ml, mr, mt, mb. View source

Root

The container for the screenshot. Maps to a div element.

Image

The actual screenshot image. By default, maps to an img element.

Prop	Type	Default
`as`	`"img" \| "div"`	`"img"`

Examples

Basic Usage

A simple screenshot display.

 <Screenshot.Root>
  <Screenshot.Image
    src="https://images.workoscdn.com/images/278132d5-8494-4a3e-b253-ee50cfac93c0.png?auto=format&fit=max&w=3840"
    alt="WorkOS Dashboard"
  />
</Screenshot.Root>

In Documentation Context

Screenshots are commonly used in documentation to illustrate interfaces or features.

Dashboard Overview

The WorkOS Dashboard provides a comprehensive view of your organization's activity. Below you can see the main interface with various widgets and controls.

Figure 1: The WorkOS Dashboard main view

 <Box maxWidth="800px">
  <Box>
    <Heading size="4" mb="2">
      Dashboard Overview
    </Heading>

    <Text as="p" mb="4">
      The WorkOS Dashboard provides a comprehensive view of your organization's
      activity. Below you can see the main interface with various widgets and
      controls.
    </Text>

    <Screenshot.Root mb="4">
      <Screenshot.Image
        src="https://images.workoscdn.com/images/278132d5-8494-4a3e-b253-ee50cfac93c0.png?auto=format&fit=max&w=3840"
        alt="WorkOS Dashboard Interface"
      />
    </Screenshot.Root>

    <Text as="p" size="2" color="gray" mt="2">
      Figure 1: The WorkOS Dashboard main view
    </Text>
  </Box>
</Box>