# Introduction
There are a lot of awesome tree components. But always something is missing... This is another attempt to make something really cool.
This component provides many different options. But I do not see the point of adding a parameter for very specific desires. **There is no and will not be** a parameter to display the checkbox to the right of the text. U can use CSS for it. Let's have a fun!
### Features
* hackable & highly customizable
* rich options
* rich API
* simple & easy use
* keyboard navigation
* check boxes
* multi-selection
* async support
### Installation
Each library has such instruction. Still... You can skip in and open [npm ](https://npmjs.com/package/eyzy-tree)or [source code](https://github.com/eyzy/eyzy-tree) to start using.
#### Using **npm** or **yarn**
{% tabs %}
{% tab title="npm" %}
```bash
npm i eyzy-tree
```
{% endtab %}
{% tab title="yarn" %}
```bash
yarn add eyzy-tree
```
{% endtab %}
{% endtabs %}
This example shows how to integrate `eyzy-tree` component to your app.
```jsx
import React, { Component } from 'react'
import EyzyTree from 'eyzy-tree'
import 'eyzy-tree/style.css'
export default class Tree extends Component {
constructor(props) {
super(props);
this.state = {
data: [
{ text: 'Item 1' },
{ text: 'Item 2' },
{ text: 'Item 3' },
],
};
}
render() {
return (
);
}
}
```
#### Import in Browser
If you just don't want to use webpack or other bundlers, you can also simply include the standalone UMD build in your page.
Add a `script` tag and **EyzyTree** will be registered as a global variable. Also styles has to be added as well.
More convenient way is use a CDN server.
```markup
```
You can also simply include the standalone UMD build in your page.
```markup
```
Code above will import the latest version. You can specify version of the library:
```markup
```