@ubie/chakra-ui-theme
v0.1.3
Published
[Chakra UI custom theme](https://chakra-ui.com/docs/styled-system/theming/customize-theme) generated from [`@ubie/design-tokens`](https://github.com/ubie-oss/design-tokens)
Downloads
585
Readme
@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
}
}