Lucid

A UI component library from AppNexus.

View demo Download Source

Install

Lucid can be installed with npm.

npm install --save lucid-ui

Usage

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

ReactDOM.render(
  <Button>Hello World</Button>,
  mountNode
);

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.

Dependencies

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 CONTRIBUTING.md.

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';

into

import Button from 'lucid-ui/Button';

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

"plugins": [
  [
    "import",
    {
      "libraryName": "lucid-ui",
      "libraryDirectory": "",
      "camel2DashComponentName": false
    }
  ]
]

GitHub