ActiveCollab Components

Usage no npm install needed!

<script type="module">
  import activecollabComponents from 'https://cdn.skypack.dev/@activecollab/components';


ActiveCollab Design System

Visual language written in Storybook/React.


Use the package manager npm to install storybook and all dependencies.

npm install

Start Development Environment

npm run start

Build Storybook for Production

npm run build:story

Build Stories for Production

npm run build:dist

Build SVG icons

When including new SVG icons to Storybook run command below and include new generated files/icons in commit.

npm run build:icons


Icon is same as included svg name.

people.svg is just people. Check more on Icon Component.

<Icon name="name" />

Run Tests

npm run test

Update Tests

npm run test -- -u

Generate Code Coverage

npm run test:cov

Clean all dist folders (If needed)

npm run clean

Naming conventions


 Upper Camel case, with upper first letter.

    Example: DateStepper


    Camel case.

    Example: shouldDisplay


    With test suffix.

    Example: DateStepper.test


Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.