---
title: Getting Started
path: /v6/getting-started/
index: 1
---
There are two ways to install the package.
### 1. Package Manager
```bash
# npm
npm i tippy.js
# Yarn
yarn add tippy.js
```
In your application, import the `tippy` module, and the core CSS:
```js
import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css'; // optional for styling
```
This assumes you're using a module bundler like webpack, Rollup, or Parcel. If
you're getting an error message about `process` inside the browser,
[see the FAQ for help.](../faq/#im-getting-uncaught-referenceerror-process-is-not-defined)
The core CSS is not required, but provides a base styling for you to use. If
you'd like to use Tippy "headless" without any of the default element rendering
or CSS, use [Headless Tippy](../headless-tippy/).
### 2. CDN
```html
```
Place them at the very bottom of the ``, ensuring they are placed before
your own scripts. The version numbers after `@` are important, make sure they
don't get removed.
> **Note**
>
> The CSS automatically gets injected into `` with the CDN
> (`tippy-bundle`). With CSP enabled, you may need to separately link
> `dist/tippy.css` and use `dist/tippy.umd.min.js` instead.
### Usage
```html
Tippy
```
### Component Wrappers
#### React
Using React? Use the
[official component package](https://github.com/atomiks/tippyjs-react) which
integrates well with React, allowing you to use Tippy declaratively.
#### Ember
There is the unofficial [ember-tippy](https://github.com/nag5000/ember-tippy) addon
for Emberistas.
### Optional extra imports
For brevity, this documentation shows imports via a module bundler in Node. If
you're using the CDN, you'll be using `` tags instead.
This **optional** extra import in the documentation:
```js
import 'tippy.js/animations/scale.css';
```
Is equivalent to this using a CDN in the browser:
```html
```