@cruk/chakra-components v0.1.0-alpha.6
@cruk/chakra-components
This is a Chakra UI based component library for Cancer Research UK. It's currently a work in progress.
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 ChakraProvider
to wrap your application and provide styled based on the crukBrand
theme.
import type { AppProps } from "next/app";
import { ChakraProvider, crukBrand } from "@cruk/chakra-components";
const App = ({ Component, pageProps }: AppProps) => (
<ChakraProvider theme={crukBrand}>
<Component {...pageProps} />
</ChakraProvider>
);
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 {
ChakraProvider,
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) => (
<ChakraProvider theme={theme}>
<Component {...pageProps} />
</ChakraProvider>
);
export default App;
Components can also be themed using Style Props
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
9 months ago
9 months ago