# @uib/css > The official css component library for use in web applications designed in accordance with the Dräger "Usability is Blue" design manual. [![NPM][npm-icon] ][npm-url] [![semantic-release][semantic-image] ][semantic-url] ## Install Requires [Node](https://nodejs.org/en/) version 12.16 or above. ```sh npm install @uib/css ``` ## Use The components are available as precompiled css file in the themes ``bright`` and ``highvis``. In addition, a ``night`` mode is available as separate theme file, for use in combination with either the ``bright`` or ``highvis`` theme. There are different approaches for using the css styles in your project: ### @import in SCSS Import the desired theme file(s) into your ``styles.scss``: ```css @import 'node_modules/@uib/css/themes/draeger-theme-highvis.css'; ``` ### OR \ in HTML Copy the desired theme file(s) from ``node_modules/@uib/css/themes`` into your ``assets`` folder and use in your ``index.html``: ```html ``` ## Live demo Please refer to our [Storybook](https://usability-is-blue-release.azurewebsites.net/) to see the components in action and to get further information. [npm-icon]: https://nodei.co/npm/@uib/css.svg?downloads=true [npm-url]: https://npmjs.org/package/@uib/css [semantic-image]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg [semantic-url]: https://github.com/semantic-release/semantic-release