To install czb-ui (starting from a project without Material UI or SDS), run the command:
npm install @czb-ui/core czifui @emotion/css @emotion/react
@emotion/styled @mui/base @mui/material @mui/icons-material @mui/lab
Additionally, install the needed fonts using Fontsource:
npm install @fontsource/hanken-grotesk @fontsource/stix-two-text @fontsource/barlow @fontsource/lato
Next, set up the ThemeProvider at the root of your application. Additionally import the fonts installed.
import { ThemeProvider } from "@czb-ui/core";
import "@fontsource/hanken-grotesk/400.css";
import "@fontsource/hanken-grotesk/700.css";
import "@fontsource/stix-two-text/600.css";
import "@fontsource/lato/700.css";
import "@fontsource/barlow/600.css";
import "@fontsource/barlow/400.css";
function MyApp({ Component, pageProps }) {
return (
<ThemeProvider>
<Component {...pageProps} />
</ThemeProvider>
);
}