# Installing UI Kit (deprecated)

{% hint style="warning" %}
To provide greater customization options, we have open-sourced our UIKit and deprecated the packaged UIKit version previously available. For the best quality and access to the latest features, we strongly recommend integrating our UIKit with the open-source version. For more details, please refer to[ the Web UIKit Installation Guide ](https://docs.social.plus/social-plus-uikit/uikit-3/web/web-uikit-installation-guide)section.
{% endhint %}

## **The UiKitProvider**

At the core of your project, you will need to import and decorate your application with the `UiKitProvider`.

```javascript
import { UiKitProvider } from ‘@amityco/ui-kit’

export default function App() {
  return <UiKitProvider>
    <YourApp />
  </UiKitProvider>
}
```

{% hint style="warning" %}
social.plus UIKit already includes our SDK. Don’t install social.plus SDK separately if you have already installed the UIKit.
{% endhint %}

## **Using the UIKit**

You can use the UIKit components with this code:

```javascript
<AmityUiKitProvider key={userId} apiKey={apiKey} userId={userId}>
    <AmityUiKitSocial />
</AmityUiKitProvider>
```

{% hint style="info" %}
Check this [sample code](https://github.com/AmityCo/Amity-Social-Cloud-Web-Sample-Apps/blob/main/ui-kit-app/src/App.js) in our web sample application.
{% endhint %}