---
order: 0
title: Overview
---

Following the DPL specification, we developed a React UI library `@enos/dpl` that contains a set of high quality components and demos for building rich, interactive user interfaces.

<style>
.pic-plus > * {
  display: inline-block !important;
  vertical-align: middle;
}
.pic-plus span {
  font-size: 30px;
  color: #aaa;
  margin: 0 20px;
}
</style>

---

## Features

- An enterprise-class UI design language for web applications.
- A set of high-quality React components out of the box.
- A npm + webpack + babel front-end development workflow.

## Environment Support

* Modern browsers and Internet Explorer 9+
* Server-side Rendering

## Version

- [Stable](http://npm.envisioncn.com/package/@enos/dpl)

## Installation

### Using npm

**We recommend using npm to install**，it not only makes development easier，but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.

```bash
$ npm install @enos/dpl --save
```

If you are in a bad network environment，you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm).

### Import in Browser

Add `script` and `link` tags in your browser and use the global variable `@enos/dpl`.

We provide `dpl.js` `dpl.css` and `dpl.min.js` `dpl.min.css` under `dpl/dist` in dpl's npm package.

> **We strongly discourage loading the entire files** this will add bloat to your application and make it more difficult to receive bugfixes and updates.

## Usage

```jsx
import { DatePicker } from '@enos/dpl';
ReactDOM.render(<DatePicker />, mountNode);
```

And import stylesheets manually:

```jsx
import '@enos/dpl/dist/dpl.css';  // or '@enos/dpl/dist/dpl.less'
```

### Use modularized dpl

- Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)

   ```js
   // .babelrc or babel-loader option
   {
     "plugins": [
       ["import", { "libraryName": "@enos/dpl", "style": "css" }]
     ]
   }
   ```

   This allows you to import components from dpl without having to manually import the corresponding stylesheet. The babel plugin will automatically import stylesheets.

   ```jsx
   // import js and css modularly, parsed by babel-plugin-import
   import { DatePicker } from '@enos/dpl';
   ```

- Manually import

   ```jsx
   import DatePicker from '@enos/dpl/lib/date-picker';  // for js
   import '@enos/dpl/lib/date-picker/style/css';        // for css
   // import '@enos/dpl/lib/date-picker/style';         // that will import less
   ```