@ubie/chakra-ui-theme
Chakra UI custom theme generated from @ubie/design-tokens
Usage
- Install the package
npm i @ubie/chakra-ui-theme- Register to Chakra UI
import { ChakraProvider, extendTheme } from "@chakra-ui/react";
import ubieTheme from "@ubie/chakra-ui-theme";
const theme = extendTheme(
{
/** Define your theme here so it will override ubie theme. */
},
ubieTheme
);
const App = () => {
return <ChakraProvider theme={theme}>{/** ... */}</ChakraProvider>;
};- Now you can use ubie colors
// Primitive colors
<Box textColor="blue.500">Ubie blue</Box>
// Semantic colors
<Box textColor="accent">Accent color, same to pink.500</Box>FAQ
Got Cannot find module its corresponding type error on TypeScript
Enable resolveJsonModule option in your tsconfig.
{
"compilerOptions": {
...
"resolveJsonModule": true
}
}