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>
as
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>
Screenshots are commonly used in documentation to illustrate interfaces or features.
<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>