https://github.com/pknu-wap/wap-ui

WAP 리액트 디자인 시스템
https://github.com/pknu-wap/wap-ui

components-library design-system emotion framer-motion monorepo react react-components reactjs ui-library wap

Last synced: 5 days ago
JSON representation

WAP 리액트 디자인 시스템

• Host: GitHub
• URL: https://github.com/pknu-wap/wap-ui
• Owner: pknu-wap
• License: mit
• Created: 2022-09-25T04:15:38.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-08-28T03:31:18.000Z (about 1 year ago)
• Last Synced: 2024-10-10T11:02:27.430Z (26 days ago)
• Topics: components-library, design-system, emotion, framer-motion, monorepo, react, react-components, reactjs, ui-library, wap
• Language: TypeScript
• Homepage: https://wap-ui.vercel.app
• Size: 11.5 MB
• Stars: 20
• Watchers: 1
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        






# 
<Awesome React UI Library />




  

    

  

  

    

  

  

  





  

  

  



## `Demo`

  

    

      Try using it in playground

    

  

  

    

      

    

    

      

    

  

  

## `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.

  

    

      Documents

    

    

      Jsdocs

    

  

  

    

      

    

    

      

    

    

## `Contributors`

  

    

      

        

        


        neko113 💻

    

    

      

        

        


        sjyoung428 💻

    

    

      

        

        


        mimpie 💻

    

  

  

    컴공19 김민수

    컴공16 성준영

    컴공21 이예슬

  

## `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)