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


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][bpi] 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