node package manager
Love JavaScript? Your insights can make it even better. Take the 2017 JavaScript Ecosystem Survey ยป


Lucid Build Status codecov Stories in Ready

A UI component library from AppNexus.


Lucid can be installed with npm.

npm install --save lucid-ui


import React from 'react';
import ReactDOM from 'react-dom';
import Button from 'lucid-ui/Button';
// `import { Button } from 'lucid-ui'` also works but will result in larger bundle sizes

  <Button>Hello World</Button>,

Lucid uses less for its stylesheets. If you use less, you can include the styles like so:

@import "node_modules/lucid-ui/src/index.less";

If you don't use less, you can use the precompiled css file node_modules/lucid-ui/dist/index.css.


lucid-ui has several React peer dependencies. This means your application is responsible for declaring dependencies on compatible versions. Currently we support React 15.

Example package.json:

  "dependencies": {
    "lucid-ui": "^2.0.0",
    "react": "^15.0.0",
    "react-dom": "^15.0.0",
    "react-addons-css-transition-group": "^15.0.0"

To contribute to lucid, please see

Reducing bundle size

Path imports

If you're starting a new project it's best to simply import all your components by their paths. This will make sure that only the components you need will be included in your bundle:

import Button from 'lucid-ui/Button';
import DataTable from 'lucid-ui/DataTable';

Babel plugin

If you have an existing project using lucid you should consider using babel plugin import that can automatically transform your ES6 module imports into path imports. Under the hood it will transform import code like this:

import { Button } from 'lucid-ui';


import Button from 'lucid-ui/Button';

Here's a .babelrc plugin configuration that works with lucid:

"plugins": [
      "libraryName": "lucid-ui",
      "libraryDirectory": "",
      "camel2DashComponentName": false


  • BrowserStack for providing cross-browser testing infrastructure.
  • Travis CI for providing continuous integration infrastructure.
  • CodeCov for providing code coverage analysis infrastructure.