Cisco Collab UI framework for ReactJs applications


15.1.13 years ago4 years agoMinified + gzip package size for @collab-ui/react in KB


Collab UI React

CircleCI npm (scoped) license

Collab UI React is a resuable, component based, flexible React library available as npm module. It provides set of UI components and utilities based on Momentum Design.

The git repo can be cloned from collab-ui-react at https://github.com/collab-ui/collab-ui-react.

Checkout the documentation for documentation and live examples.


  • Independent — pick and use only the components you need.
  • Styled — override styles of components by className and style properties.
  • Customizable — properties allow many different config options to suit your app.
  • Performant - high performance guaranteed with use of CSS3 Flexbox and non-bloated architecture.
  • Reliable — each component is rigorously tested.

Getting Started

Source of @collab-ui/react is available here. To use collab-ui-react in your application follow below steps:

Step 1 - Install and add @collab-ui/react to your npm package dependencies

Using npm

npm i -S @collab-ui/react

Using yarn

yarn install -S @collab-ui/react

Step 2. Import Collab UI React components in your app

Use ES6 import statement to import the component that you want to use:

import { Button } from '@collab-ui/react';
// or
import Button from from '@collab-ui/react/button';

<div className="container">
  <Button name="primary" size="large">Welcome to Collab UI React !</Button>

Tools & Frameworks

Package manager

  • yarn - BSD-2-Clause

Base framework

Collaboration Design System Look & Feel

ES6 Minifier

ES6 Lint


CSS Utility Tool

JsUnit Testing framework


Want to contribute? Why not go through Developer's Guide to understand more technical details about the project and contribution guidelines to be adhered.


The changelog can be found on the Releases page.


Copyright (c) 2017 Cisco Systems

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.