Import Shortcuts

There are a few import aliases predefined for you.

@components/* -> ./components/*
@hooks/*      -> ./hooks/*
@lib/*      -> ./lib/*
@utils/*      -> ./utils/*
@theme        -> ./theme.css.tsx
@queries      -> ./hooks/queries.ts

This just means that you can use absolute paths to import your components and hooks etc, rather than having to use relative paths — making copy/pasting of import statements around your codebase a little bit easier.

For example:

import { Button } from '@components/ui/Button'
import { useWindowSize } from '@hooks/useWindowSize'
import { styled } from '@theme'

export function MyComponent() {
  const size = useWindowSize()
  return <Wrapper>
    <div>You're on a {size.width > size.height ? 'landscape' : 'portrait'} device</div>
    <Button />
  </Wrapper>
}

const Wrapper = styled('div', {
  display: 'flex'
})