Start by installing the components library in your project:

npm install @code4rena/components-library

Next, to ensure that all the components have the appropriate styling, import the library's styles into your application. This can be done in one of two ways:

1. If you have a global CSS/SCSS file, you can import the custom styles using the CSS import rule into that global file.

@import "@code4rena/components-library/styles"

2. Another option is to import it in any layout/page/component which wraps your entire web application; in doing so, you make sure the styling bubbles down to all pages of the application using the library's components.

import "@code4rena/components-library/styles";

All the components in this package can be accessed through named imports. For a full list of available components, take a look at our Storybook

import { Alert } from "@code4rena/components-library";

<Alert {...args} />

All components in this library have TypeScript support. Types for all complex component props are also named exports available through the /types subdirectory (see example below):

import { ButtonSize, ButtonType, ButtonVariant } from "@code4rena/components-library/types";

<Button
    label="Sample Button"
    type={ButtonType.BUTTON}
    variant={ButtonVariant.SECONDARY}
    size={ButtonSize.NARROW}
/>