Getting Started

Installation#

Install Argon Dashboard Chakra by running either of the following:

• Install NodeJS LTS from NodeJs Official Page (NOTE: Product only works with LTS version)

Clone the repository with the following command:

git clone https://github.com/creativetimofficial/argon-dashboard-chakra.git

Run in terminal this command:

npm install

Then run this command to start your local server

npm start

Add custom theme (Optional)#

Inside Argon Dashboard Chakra, you can find the ChakraProvider component inside /src/layouts/Admin.js and /src/layouts/Auth.js.

If you need to customize the default chakra theme to match your design requirements, you can extend the theme from @chakra-ui/react.

Chakra UI provides an extendTheme function that deep merges the default theme with your customizations.

// 1. Import the extendTheme function
import { extendTheme } from "@chakra-ui/react"
// 2. Extend the theme to include custom colors, fonts, etc
const colors = {
  navy: {
    50: "#d0dcfb",
    100: "#aac0fe",
    200: "#a3b9f8",
    300: "#728fea",
    400: "#3652ba",
    500: "#1b3bbb",
    600: "#24388a",
    600: "#24388a",
    700: "#1b254b",
    800: "#111c44",
    900: "#0b1437",
  },
}
const theme = extendTheme({ colors })
// 3. Pass the `theme` prop to the `ChakraProvider`
function App({ Component }) {
  return (
    <ChakraProvider theme={theme}>
      <Component />
    </ChakraProvider>
  )
}

ChakraProvider Props#

That's it, you're good to go!