Empty State

An often overlooked, but important part of website design are empty states. Rather than showing a blank screen, they provide a path forward for your user's to their first interaction with the application (e.g., create your first site).

Use Case#

When a user first creates an account, they will have no sites shown on their dashboard. Let's implement an EmptyState component we can use to guide them towards creating their first site. This will provide a better user experience for the customer.

Empty State Component#

Using Chakra UI's composable Box element, we can apply style props to design a pseudo-table mimicking our real design. Then, we can add a call-to-action Button giving the user direction.

components/EmptyState.js

import React from 'react'
import { Box, Heading, Stack, Text, Button } from '@chakra-ui/core'

const EmptyState = () => {
  return (
    <Box
      backgroundColor="white"
      ml={0}
      mr={0}
      borderRadius={8}
      boxShadow="0px 4px 10px rgba(0, 0, 0, 0.05)"
    >
      <Box
        backgroundColor="gray.50"
        borderTopLeftRadius={8}
        borderTopRightRadius={8}
        borderBottom="1px solid"
        borderBottomColor="gray.200"
        height="40px"
      />
      <Stack
        justifyContent="center"
        alignItems="center"
        spacing={2}
        p={16}
        borderRadius={8}
      >
        <Heading size="lg">You haven’t added any sites.</Heading>
        <Text>Welcome 👋🏼 Let’s get started.</Text>
        <Button
          maxWidth="200px"
          backgroundColor="gray.900"
          color="white"
          fontWeight="medium"
          mt={4}
          _hover={{ bg: 'gray.700' }}
          _active={{
            bg: 'gray.800',
            transform: 'scale(0.95)',
          }}
        >
          Add Your First Site
        </Button>
      </Stack>
    </Box>
  )
}

export default EmptyState