Let's create some responsive and custom components with Chakra-ui in Next.js
Tags: nextjs, chakraui, responsivedesign
Published: 2022-05-22 10:00:38

Firstly, I'll assume you have a NextJS project already set-up, if not, you can follow your preferred configuration [Here](https://nextjs.org/docs/getting-started), then we'll setup [Chakra for Next](https://chakra-ui.com/guides/getting-started/nextjs-guide). 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


```javascript
//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.


```javascript
//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

```javascript
//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](https://chakra-ui.com/docs/styled-system/features/style-props) 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

```javascript

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

```javascript

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
```javascript
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

![Screenshot of our Button variant](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5e9tog46d34zf27m1j4.png)

```javascript

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](https://dev.to/suiteasdesign/responsive-layout-in-nextjs-with-chakra-ui-5h6o)