ui-theme 0.5.0
Install from the command line:
Learn more about npm packages
$ npm install @hivemq/ui-theme@0.5.0
Install via package.json:
"@hivemq/ui-theme": "0.5.0"
About this version
This package contains the theme for all HiveMQ ChakraUI Projects.
To install the theme, you have to add the following line to your .npmrc file:
@hivemq:registry=https://npm.pkg.github.comTo install the peer dependencies, use the following command:
pnpm add @chakra-ui/react @emotion/react @emotion/styled framer-motionEach project has to generate the types for the theme, it cannot be exported by default. Therefore we have to install the following dependency to our project.
pnpm add @chakra-ui/cliAnd also include the generation to our postinstall command
{
"scripts": {
"postinstall": "chakra-cli tokens @hivemq/ui-theme"
}
}To install a theme, use the following command:
pnpm add @hivemq/ui-themeFonts are not being installed by the theme itself, so you have to install them per project. For that you can use the following command to install the fonts you want to use in your project. For example, Roboto and Raleway as these are also the default fonts used in the theme.
pnpm add @fontsource/roboto @fontsource/ralewayThen you can import these fonts ether in your main.ts file or global.css file.
/* Install Roboto for general body text */
@import '../node_modules/@fontsource/roboto/100.css';
@import '../node_modules/@fontsource/roboto/300.css';
@import '../node_modules/@fontsource/roboto/400.css';
@import '../node_modules/@fontsource/roboto/500.css';
@import '../node_modules/@fontsource/roboto/700.css';
@import '../node_modules/@fontsource/roboto/900.css';
/* Install Raleway for heading text */
@import '../node_modules/@fontsource/raleway/100.css';
@import '../node_modules/@fontsource/raleway/200.css';
@import '../node_modules/@fontsource/raleway/300.css';
@import '../node_modules/@fontsource/raleway/400.css';
@import '../node_modules/@fontsource/raleway/500.css';
@import '../node_modules/@fontsource/raleway/600.css';
@import '../node_modules/@fontsource/raleway/700.css';
@import '../node_modules/@fontsource/raleway/800.css';
@import '../node_modules/@fontsource/raleway/900.css';