Need help with lucid?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

appnexus
171 Stars 71 Forks Other 4.8K Commits 77 Opened issues

Description

A UI component library from AppNexus.

Services available

!
?

Need anything else?

Contributors list

Lucid codecov

A UI component library from AppNexus.

Install

Lucid can be installed with npm

npm install --save lucid-ui

or yarn

yarn add lucid-ui

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'lucid-ui';

ReactDOM.render( Hello World, 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/lucid.css
.

Custom CSS Scope

There are some very rare situations where you might need to customize the prefix for all the css class names emitted by the library and

less
. If you find yourself in that unenviable position, you can do the following:

In your webpack config use the

DefinePlugin
to specify

LUCID_CSS_NAMESPACE
like so:
new webpack.DefinePlugin({
  LUCID_CSS_NAMESPACE: "'something-custom'",
});

When you render the

less
, make sure to set the
prefix
variable
to the same thing you set in in your webpack config. E.g.
lessc node_modules/lucid-ui/src/index.less --modify-var='prefix=something-custom'

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 and 16.

Example package.json:

{
  "dependencies": {
    "lucid-ui": "^5.0.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
  }
}

To contribute to lucid, please see

CONTRIBUTING.md
.

Credits

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.