## `Installing WAP-UI`
To use WAP UI, Install the `wap-ui` package and its peer dependencies.
(`@emotion/react`, `@emotion/styled`, `framer-motion`)
```sh
pnpm add wap-ui @emotion/react @emotion/styled framer-motion
# or
yarn add wap-ui @emotion/react @emotion/styled framer-motion
# or
npm i wap-ui @emotion/react @emotion/styled framer-motion
```
## `Usage`
To start using the components, follow these steps:
1. For WAP UI to work correctly, Wrap `WapUIProvider` provided by `wap-ui` at root of your application.
```tsx
import React from 'react';
// 1. import `WapUIProvider` component
import ReactDOM from 'react-dom/client';
import App from './App';
import { WapUIProvider } from 'wap-ui';
// 2. Wrap WapUIProvider at the root of your app
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
,
);
```
2. Bring components what you want and use them.
```tsx
import { Button } from 'wap-ui';
const Home = () => {
return (
);
};
export default Home;
```
3. You can refer to the components through Documents or Jsdocs like that.
## `Links`
- #### [Documents](https://github.com/pknu-wap/wap-ui/tree/main/docs)
- #### [NPM](https://www.npmjs.com/package/wap-ui)
- #### [Playground](https://wap-ui.vercel.app/)
- #### [Presentations](https://github.com/pknu-wap/wap-ui/tree/main/ppt)
- #### [Example](https://github.com/pknu-wap/wap-ui/tree/main/example)
---
_Source: https://npm.io/package/wap-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
