@cruk/chakra-components

This is a Chakra UI v2 based component library for Cancer Research UK. It's currently a WIP.

https://v2.chakra-ui.com/docs/

Installation

You can start using @cruk/chakra-components in your project by running the following command:

npm i @cruk/chakra-components

Once added to the project, you can use the ChakraBaseProvider to wrap your application and provide styled based on the crukBrand theme.

import type { AppProps } from "next/app";
import { ChakraBaseProvider, crukBrand } from "@cruk/chakra-components";

const App = ({ Component, pageProps }: AppProps) => (
  <ChakraBaseProvider theme={crukBrand}>
    <Component {...pageProps} />
  </ChakraBaseProvider>
);

export default App;

Documentation

The Storybook documentation for these components can be found at: https://main-site-components.vercel.app

Chakra UI

The components in this library are based on Chakra UI. Components are being constantly added and will be updated as per the brand teams additions to the new CRUK Design System.

Theming Components

Components can be extended using a Chakra Theme provider. Here is an example of how a button can be extended:

import type { AppProps } from "next/app";
import {
  ChakraBaseProvider,
  crukBrand,
  extendTheme,
} from "@cruk/chakra-components";

// Customise the crukBrand
const theme = extendTheme({
  ...crukBrand,
  components: {
    Button: {
      baseStyle: {
        fontWeight: "bold",
        // Add your custom values here
      },
    },
  },
});

const App = ({ Component, pageProps }: AppProps) => (
  <ChakraBaseProvider theme={theme}>
    <Component {...pageProps} />
  </ChakraBaseProvider>
);

export default App;

Components can also be themed using Style Props