Getting Started
Installation#
Install Purity UI Dashboard 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/purity-ui-dashboard.git
Run in terminal this command:
npm install
Then run this command to start your local server
npm start
Add custom theme (Optional)#
Inside Purity UI Dashboard, 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 functionimport { extendTheme } from "@chakra-ui/react"// 2. Extend the theme to include custom colors, fonts, etcconst colors = {brand: {900: "#1a365d",800: "#153e75",700: "#2a69ac",},}const theme = extendTheme({ colors })// 3. Pass the `theme` prop to the `ChakraProvider`function App({ Component }) {return (<ChakraProvider theme={theme}><Component /></ChakraProvider>)}
ChakraProvider Props#
Name | Type | Default | Description |
---|---|---|---|
resetCSS | boolean | true | automatically includes <CSSReset /> |
theme | Theme | @chakra-ui/theme | optional custom theme |
colorModeManager | StorageManager | localStorageManager | manager to persist a users color mode preference in |
portalZIndex | number | undefined | common z-index to use for Portal |
That's it, you're good to go!
© 2021, Made with ❤️ by Creative Tim & Simmmple for a better web