@ubie/chakra-ui-theme

0.1.3 • Public • Published

@ubie/chakra-ui-theme

Chakra UI custom theme generated from @ubie/design-tokens

Usage

  1. Install the package
npm i @ubie/chakra-ui-theme
  1. 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>;
};
  1. 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
  }
}

/@ubie/chakra-ui-theme/

    Package Sidebar

    Install

    npm i @ubie/chakra-ui-theme

    Weekly Downloads

    106

    Version

    0.1.3

    License

    Apache-2.0

    Unpacked Size

    16.4 kB

    Total Files

    5

    Last publish

    Collaborators

    • hokaccha
    • ubie-admin
    • takanorip
    • monchi