How to Use Chakra UI with Next.js and React

[ad_1]

Building web sites and purposes is difficult. There are a whole lot of issues to take into account to be sure our apps are usable and accessible together with how our React parts work.

How can we benefit from the facility of Chakra UI to construct nice net apps?

What is Chakra UI?

Chakra UI is a part library for React that makes it straightforward to construct the UI of an app or web site.

Their objective is to present a easy, modular, and accessible set of parts to stand up and working shortly.

What makes Chakra UI so nice?

To begin, by default Chakra strives to make every part accessible. It’s a essential a part of software growth that’s typically ignored, and the Chakra maintainers have gone out of their method to make sure the parts observe the WAI-ARIA tips.

Chakra additionally features a easy API permitting builders to get productive. It permits folks and groups to make inclusive apps with out having to fear about constructing a bunch of parts themselves.

For styling and customization, Chakra makes use of Emotion beneath the hood to present builders the flexibility to fashion their parts proper within their JavaScript with fashion props. It comes with a default theme, however permits the flexibility to simply override it with customized settings.

What are we going to construct?

To get a good suggestion of how Chakra works, we’re going to basically rebuild the default Next.js template with Chakra UI parts.

This will assist us perceive a number of essential ideas, similar to how to use Chakra UI with Next.js, how to add customized kinds with props, and how to customise the Chakra UI theme.

The ideas right here can apply just about to any React app, although the examples can be barely particular to Next.js.

Step 0: Creating a brand new React challenge with Next.js

To get began, we want a React app. We’re going to use Next.js as our framework which can give us the flexibility to simply spin up a brand new app.

Once contained in the listing you need to create your challenge in, run:

yarn create next-app my-chakra-app
# or
npx create-next-app my-chakra-app

Note: be happy to change my-chakra-app to no matter you need to identify the challenge listing.

And as soon as that’s completed, you possibly can navigate into that listing and begin the challenge with:

yarn dev
# or
npm run dev

That ought to spin up your growth server at http://localhost:3000 and we ought to be prepared to go!

Default Next.js template

Follow alongside with the commit!

Step 1: Installing and configuring Chakra UI in Next.js

Next, let’s set up Chakra UI.

Inside of your challenge listing, run:

yarn add @chakra-ui/core @emotion/core @emotion/styled emotion-theming
# or 
npm set up @chakra-ui/core @emotion/core @emotion/styled emotion-theming

This will set up Chakra UI and its dependencies, which incorporates Emotion, because it depends on it for the styling.

To get Chakra working within our app, we want to configure a Provider on the root of our software. This will enable all of Chakra’s parts to speak to one another and use the configuration to preserve constant kinds.

Inside pages/_app.js, first let’s import our Provider on the prime:

import { ThemeProvider, theme } from '@chakra-ui/core';

Next, substitute the return assertion within the part with:

perform MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

As you’ll discover, we’re additionally passing a theme variable to our supplier. We’re importing the Chakra UI default theme straight from Chakra and passing it in to our ThemeProvider so all of our parts can get the default kinds and configurations.

Finally, we would like to add a part known as CSSReset proper as a direct baby of our ThemeProvider.

First, add CSSReset as an import:

import { ThemeProvider, theme, CSSReset } from '@chakra-ui/core';

Then add the part proper inside ThemeProvider:

<ThemeProvider theme={theme}>
  <CSSReset />
  <Component {...pageProps} />
</ThemeProvider>

And now if we reload the web page, we will see that issues are wanting just a little bit completely different!

Next.js with Chakra UI CSS Reset

The browser comes with a whole lot of default kinds and by default, Chakra UI doesn’t override them. This contains kinds like borders on a button factor.

While we don’t essentially want the CSS Reset right here, we might override these issues manually. This gives us with a basis the place we’ll know that Chakra UI is working because it’s meant to and we will begin including our parts.

Follow alongside with the commit!

Step 2: Adding Chakra UI parts to a React app

Now for the enjoyable half. We’re going to use Chakra UI parts to attempt to rebuild the Next.js default template. It’s not going to look 100% precisely prefer it, however it is going to carry the spirit and we will customise it as we’d like.

Building the Title and Description

Starting from the highest, let’s replace our title and description.

At the highest of the web page, we want to import our Heading part:

import { Heading, Link } from "@chakra-ui/core";

Then let’s substitute the <h1> with:

<Heading as="h1" measurement="2xl" mb="2">
  Welcome to Next.js!
</Heading>

Here, we’re utilizing the Heading part which we then set “as” an h1. We can use any HTML heading factor tag identify, however since we’re changing an h1, we would like to use that.

We’re additionally setting a measurement attribute, which permits us to management how huge out heading is, in addition to mb, which stands for margin-bottom, permitting us to add some area under.

And we will already see our web page is wanting extra just like the default template.

Chakra UI Heading part

We additionally need to add again our hyperlink.

Add Link to our import assertion on the prime and then within our <Heading> part, substitute the Next.js textual content with:

<Link coloration="teal.500" href="https://nextjs.org">Next.js!</Link>

Chakra’s Link part creates a hyperlink as anticipated, however then permits us to use the fashion props to customise it. Here, we’re utilizing the colour variable teal.500 that Chakra gives to change our hyperlink to Chakra’s colours.

And we will see that we’ve got our Next.js hyperlink!

Chakra UI Heading with Link part

The final piece of the header is the outline. For that, we would like to use the Text part.

Add Text  and Code to the import assertion and substitute the outline with:

<Text fontSize="xl" mt="2">
  Get began by enhancing <Code>pages/index.js</Code>
</Text>

We’re utilizing the Text part to recreate a <p> tag and the Code part to create our <code> tag. Similar to our Heading part, we’re including a fontSize to make the font greater and mt which stands for margin-top to add some area above it.

And now we’ve got our header!

Chakra UI Text part with Code

Replacing information playing cards with Chakra UI parts

For every of our playing cards, we will use the identical ideas as we did with the header to recreate every of our containers.

To begin, add an import for the Flex part and substitute the tag <div className={kinds.grid}> with:

<Flex flexWrap="wrap" alignItems="center" justifyContent="center" maxW="800px" mt="10">
  ...
</Flex>

Make certain to depart the entire playing cards within the Flex part. The Flex part will recreate our grid by including Flexbox alongside with the identical properties that had been on the grid earlier than.

At this level, it ought to precisely the identical because it did earlier than.

Next, add Box to the import assertion and then substitute the primary card with:

<Box as="a" href="https://nextjs.org/docs" p="6" m="4" borderWidth="1px" rounded="lg" flexBasis="45%">
  <Heading as="h3" measurement="lg" mb="2">Documentation &rarr;</Heading>
  <Text fontSize="lg">Find in-depth details about Next.js options and API.</Text>
</Box>

Similar to our Heading part, we’re setting our Box part “as” an <a> tag permitting it to function a hyperlink. We then configure our fashion props to replicate our playing cards.

Inside of that, we use the Heading and Text part to recreate the precise content material of the playing cards.

And after solely altering the primary card, we will now see the adjustments:

Chakra UI Box part

Now, we will return and substitute the opposite three playing cards with the identical parts to end recreating our grid.

For enjoyable, we will add a fifth card that hyperlinks to Chakra UI:

<Box as="a" href="https://chakra-ui.com/" p="6" m="4" borderWidth="1px" rounded="lg" flexBasis="45%">
  <Heading as="h3" measurement="lg" mb="2">Chakra UI &rarr;</Heading>
  <Text fontSize="lg">Build accessible React apps & web sites with velocity.</Text>
</Box>

And with all of our adjustments, we will now see our recreated Next.js beginning template!

Chakra UI recreating Next.js grid

Follow alongside with the commit!

Step 3: Making responsive parts with Chakra UI

Part of what the default Next.js grid was in a position to present was the flexibility for the playing cards to broaden to full width as soon as the scale of the browser turns into sufficiently small. This is especially related at 600px, which generally means somebody’s on a cellular system.

If we have a look at our web page on a cellular system, we will see that our playing cards aren’t filling up all the width.

Chakra UI default with out responsive

Chakra permits us to set responsive kinds with its baked in sizing, permitting us to simply recreate our responsive grid playing cards.

To do that, as a substitute of passing in a single worth to our fashion props, we will move in an array.

For occasion, on every of our Box parts, let’s replace the flexBasis prop to:

flexBasis={['auto', '45%']}

Here, in accordance to Chakra’s default responsive breakpoints , we’re saying that by default, we would like our flexBasis to be set as auto. But for something 480px and bigger, once more which is Chakra’s default first breakpoint, we set it to 45%.

Chakra considers its responsive styling to be cellular first, which is why you see the 480px act at the least measurement, not a most measurement.

And with that change, we will now see that on a big system, we nonetheless have our grid.

Chakra UI parts on massive system

But now on cellular, our playing cards take up all the width!

Chakra UI parts on small system

Using the array sample works for the entire breakpoints, so should you wished extra management over your kinds, Chakra permits you to do this.

Follow alongside with the commit!

Step 4: Customizing the default Chakra UI theme

While Chakra gives a fairly nice default theme, we even have the flexibility to customise it to our liking to match our model or private style.

For occasion, whereas the teal that we used for our Heading hyperlink is nice and makes use of Chakra’s kinds, what if I wished to customise all hyperlinks to use the purple that I use on my web site?

To begin, Chakra comes with a default purple, so we will replace our hyperlink to use that purple:

Welcome to <Link coloration="purple.500" href="https://nextjs.org">Next.js!</Link>

And we see our change.

Making Next.js header hyperlink purple with coloration fashion prop

That appears to be like nice, however let’s replace it to the precise purple I take advantage of.

Inside of pages/_app.js, we’re going to create a brand new object on the prime of the web page, the place we unfold the default theme creating a brand new theme object. We’ll additionally substitute the theme prop with our new object:

const customizedTheme = {
  ...theme
}

perform MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={customizedTheme}>

If we save and reload the web page, it is going to look precisely the identical.

Next, we would like to replace the colours, so in our customized theme object, let’s add the colours property, the place we will then set our customized purple:

const customizedTheme = {
  ...theme,
  colours: {
    ...theme.colours,
    purple: '#692ba8'
  }
}

Note: you’ll see right here that we’re additionally spreading theme.colours. If we don’t, we’ll be changing the colours object with solely the purple worth, which means we received’t have every other colours.

But if we reload the web page, our hyperlink isn’t purple anymore!

Next.js hyperlink with no coloration

Chakra usually makes use of ranges of colours which permits us to use completely different shades of every of the colours. In our Link part, we’re specifying purple.500 which we didn’t set to exist.

So to repair that, we will use a software like Smart Swatch to get all of our coloration values that we want and set these in our customized theme object:

const customizedTheme = {
  ...theme,
  colours: {
    ...theme.colours,
    purple: {
      50: '#f5e9ff',
      100: '#dac1f3',
      200: '#c098e7',
      300: '#a571dc',
      400: '#8c48d0',
      500: '#722fb7',
      600: '#59238f',
      700: '#3f1968',
      800: '#260f40',
      900: '#10031a',
    }
  }
}

Tip: Smart Swatch really permits you to copy these values as a JavaScript object, making it simpler to paste into our theme!

And now if we reload the web page, we will see our purple!

Next.js with customized purple

While we used a variety worth right here, we will additionally specify coloration variables and not using a vary.

Say I wished to depart the default Chakra purple “as is” however present a method for me to reference my purple.

To do this, I might take away these purple values and add a brand new customized variable:

const customizedTheme = {
  ...theme,
  colours: {
    ...theme.colours,
    spacejelly: '#692ba8'
  }
}

Then replace my Link to use that coloration:

Welcome to <Link coloration="spacejelly" href="https://nextjs.org">Next.js!</Link>

And we will see that we’re now utilizing our purple with out overriding the unique:

Next.js with customized coloration variable

We can apply this to most components of the kinds of Chakra, together with Typography and setting customized Breakpoints. It’s one other method to make our challenge customized to our personal whereas nonetheless making the most of the facility of Chakra!

Follow alongside with the commit!

What else are you able to do with Chakra UI?

While we went via some less complicated examples, it actually opens the door to extra complicated fashion adjustments and controls that Chakra gives with its part APIs.

There are additionally an entire lot of superior parts that you should utilize to rework your web site or software and make growth quick and straightforward!

They even present recipes which have some examples of how one can mix the parts leading to highly effective performance. This features a responsive header and even including animations with Framer Motion.



[ad_2]

Source hyperlink

Write a comment