Customize 404

Help your users find their way back.

Use your own 404 page

By default Smooth DOC provides a 404 webpage. You can customize it by creating a pages/404.mdx.

The page will be served when a page is not found.

Default 404 page

---
title: Page not found
---
import { Box } from '@xstyled/styled-components'
import { Article, ScreenContainer, Button } from '../components'
import notFoundImageURL from '../images/404.png'
<Article style={{ textAlign: 'center', overflow: 'hidden' }}>
<ScreenContainer mt={5} position="relative">
<Box forwardedAs="h1" m={0}>
There's a leak in the website.
</Box>
<Box
forwardedAs="img"
alt="Leak illustration"
src={notFoundImageURL}
width={500}
height="auto"
mt={{ xs: '-20%', md: -100 }}
mb={{ xs: '-10%', md: -30 }}
/>
<Box forwardedAs="p" my={3} mx="auto" fontSize="1.5em">
The page you are looking for does not actually exist.
</Box>
<div>
<Button forwardedAs={Link} to="/">
Back to home
</Button>
</div>
</ScreenContainer>
</Article>
Edit this page on GitHub