Let's create some responsive and custom components with Chakra-ui in Next.js

Firstly, I'll assume you have a NextJS project already set-up, if not, you can follow your preferred configuration Here, then we'll setup Chakra for Next. The First bit's of code we'll write, is to customize some global values.

Overwrite Colors & Breakpoints

Below, we'll overwrite the default primary color and breakpoints

//styles/ChakraTheme.js

import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  colors: {
    primary: '#201D29',
  },
  breakpoints: {
    sm: '414px',
    md: '584px',
    lg: '1280px',
  },
});

export default theme;

Use Our Overwrites

To use our custom values, we first pass the theme into our ChakraProvider from the Setup.

//pages/_app.js

import { ChakraProvider } from '@chakra-ui/react'
import theme from '../styles/ChakraTheme.js';

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

Use Our Custom Color

Then we can use our custom values in our components

//pages/Home.js
import { Box } from '@chakra-ui/react'; /* <== A Box is a Chakra-ui component,  equivalent to a div, but one you can style  with style props or those from out custom theme**/

const Home = () => {
  return (
    <Box bg='primary'>Home</Box> 
  )
}
export default Home

bg is a style prop and shorthand in Chakra-ui for background-color and will give our Box that color we overwrote primary to be in out custom theme

Use Our Custom Breakpoints

To use our custom breakpoints, we pass them in an object to a style prop e.g

import { Box } from '@chakra-ui/react'; 

const Home = () => {
  return (
    <Box bg='primary' fontSize={{ base: '18px', sm: '20px' md: '24px', lg: '32px' }}>Home</Box> 
  )
}

export default Home

base: '18px' The font-size of 18px will apply from 0px- 414px viewport width

sm: '20px' The font-size of 20px will apply from 414px- 584px viewport width

md: '24px' The font-size of 24px will apply from 584px- 1280px viewport width

lg: '32px' The font-size of 32px will apply from 1280px- and up viewport width

Overwrite a component

Now lets overwrite a component

/styles/components/Button.js

const Button = {
  // Styles for the base style
  baseStyle: {
    borderRadius: '10px', 
    fontFamily: 'Baloo 2',
    // <-- border radius & font family is same for all variants and sizes
  },
sizes: {
  // Styles to be to be applied when passed to the Button
  // E.g <Button size='md'>Click</Button>
    sm: {
      fontSize: '12px',
    },
    md: {
      fontsize: '18px',
    },
    lg: {
      fontSize: '22px',
    },
  },
    // Styles for the visual style variations
  variants: {
    rainbow: {
      bgGradient:
        'linear(to-b, #ff96bc, #ffc477 , #fbe84a , #c1f3a1 , #96fce4 )',
      color: 'black',
      border: '1px solid break',
    },
  },
  //   // The default `size` or `variant` values
  //   defaultProps: {},
};

export default Button;

Add the Button to the Theme

styles/ChakraTheme.js

import { extendTheme } from '@chakra-ui/react';
import { Button } from 'import Button from './components/Button';'

const theme = extendTheme({
  components : {
  Button      
  },
  colors: {
    primary: '#201D29',
  },
  breakpoints: {
    sm: '414px',
    md: '584px',
    lg: '1280px',
  },
});

export default theme;

Use The New Button Variant

Finally we'll use our new variant in a component

import { Box } from '@chakra-ui/react'; 

const Home = () => {
  return (
    <Box bg='primary' fontSize={{ base: '18px', sm: '20px' md: '24px', lg: '32px' }}
 > <Button variant='rainbow'>
   Log in
    </Button
</Box> 
  )
}

export default Home

Learn Responsive layouts with my follow up article