TypeScript Error: Property 'above' does not exist on type 'ShowProps' in Chakra UI

Question

I'm following a tutorial that uses Chakra UI, and the following code works perfectly in the tutorial. However, in my project, I get a TypeScript error on the above prop in the Show component:

import { Grid, GridItem, Show } from "@chakra-ui/react"


function App() {
  return <Grid templateAreas={{
    base: `"nav" "main"`,
    lg: `"nav nav" "aside main"`,
  }}>
    {/* some other components */}
    <Show above="lg">
        <GridItem area="aside" bg="gold">
            Aside
        </GridItem>
    </Show>
  </Grid>
}

export default App

the error message reads: Type '{ children: Element; above: string; }' is not assignable to type 'IntrinsicAttributes & ShowProps<unknown>'. Property 'above' does not exist on type 'IntrinsicAttributes & ShowProps<unknown>'

i use @chakra-ui/[email protected]

Answer 1

Remove Show and add the "display" prop to the GridItem:

<GridItem area="aside" bg="gold" display={{ base: "none", lg: "block" }}>
    Aside
</GridItem>

Answer 2

Based on document of chakra-ui above prop has been removed in version 3

if you want to use this props, you should install version 2 using

npm i @chakra-ui/[email protected]

you can see the documents for version 2 using chakra-ui-v2 docs

you can always install older versions of a package using this pattern

npm install <package>@<version>