{"id":14961327,"url":"https://github.com/pknu-wap/wap-ui","last_synced_at":"2025-07-12T18:40:28.787Z","repository":{"id":60106486,"uuid":"541047530","full_name":"pknu-wap/wap-ui","owner":"pknu-wap","description":"WAP 리액트 디자인 시스템","archived":false,"fork":false,"pushed_at":"2023-08-28T03:31:18.000Z","size":12068,"stargazers_count":22,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-06T10:13:37.529Z","etag":null,"topics":["components-library","design-system","emotion","framer-motion","monorepo","react","react-components","reactjs","ui-library","wap"],"latest_commit_sha":null,"homepage":"https://wap-ui.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pknu-wap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-25T04:15:38.000Z","updated_at":"2025-02-26T13:40:13.000Z","dependencies_parsed_at":"2024-09-22T12:31:06.044Z","dependency_job_id":"a38c0213-b21b-4338-9ce9-46f5d91c0ad7","html_url":"https://github.com/pknu-wap/wap-ui","commit_stats":{"total_commits":327,"total_committers":3,"mean_commits":109.0,"dds":"0.14678899082568808","last_synced_commit":"6a60f6bce51c9b83a3fe545d2a3c4181f3e3815c"},"previous_names":["pknu-wap/2022_2_wap_web_team1"],"tags_count":25,"template":false,"template_full_name":null,"purl":"pkg:github/pknu-wap/wap-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pknu-wap%2Fwap-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pknu-wap%2Fwap-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pknu-wap%2Fwap-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pknu-wap%2Fwap-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pknu-wap","download_url":"https://codeload.github.com/pknu-wap/wap-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pknu-wap%2Fwap-ui/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264704594,"owners_count":23652146,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components-library","design-system","emotion","framer-motion","monorepo","react","react-components","reactjs","ui-library","wap"],"created_at":"2024-09-24T13:24:48.372Z","updated_at":"2025-07-12T18:40:28.750Z","avatar_url":"https://github.com/pknu-wap.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/75781414/192261497-b3e4b288-d1c5-4d27-a062-da65a876ecfb.png\" width=\"220\" height=\"240\"\u003e\n\u003c/div\u003e\n\n# \u003cdiv align=\"center\"\u003e\u0026lt;Awesome React UI Library /\u0026gt;\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/pknu-wap/wap-ui/blob/main/LICENSE\"\u003e\n    \u003cimg src=\"https://badgen.net/github/license/pknu-wap/wap-ui\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/wap-ui\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/wap-ui.svg?style=flat-round\" alt=\"npm downloads\"\u003e\n  \u003c/a\u003e\n  \u003cimg alt=\"Github Stars\" src=\"https://badgen.net/github/stars/pknu-wap/wap-ui\" /\u003e\n  \u003cimg src=\"https://badgen.net/github/release/pknu-wap/wap-ui\"\u003e\n\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://badgen.net/github/issues/pknu-wap/wap-ui\"\u003e\n  \u003cimg src=\"https://badgen.net/github/prs/pknu-wap/wap-ui\"\u003e\n  \u003cimg src=\"https://badgen.net/github/contributors/pknu-wap/wap-ui\"\u003e\n\u003c/p\u003e\n\n## `Demo`\n\n\u003ctable align=\"center\" width=\"100%\"\u003e\n  \u003ctr align=\"center\"\u003e\n    \u003ctd colspan=\"2\"\u003e\n      \u003ca href=\"https://wap-ui.vercel.app/?path=/story/components-button--default\"\u003eTry using it in playground\u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"50%\"\u003e\n      \u003cimg src=\"https://user-images.githubusercontent.com/75781414/209572114-dfa9b08a-052b-446e-afd5-388545d09c6b.gif\"  /\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"50%\"\u003e\n      \u003cimg src=\"https://user-images.githubusercontent.com/75781414/209572876-2720e0ef-94bb-441d-b24e-b282fefc683d.gif\" /\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## `Installing WAP-UI`\n\nTo use WAP UI, Install the `wap-ui` package and its peer dependencies.\n(`@emotion/react`, `@emotion/styled`, `framer-motion`)\n\n```sh\npnpm add wap-ui @emotion/react @emotion/styled framer-motion\n# or\nyarn add wap-ui @emotion/react @emotion/styled framer-motion\n# or\nnpm i wap-ui @emotion/react @emotion/styled framer-motion\n```\n\n## `Usage`\n\nTo start using the components, follow these steps:\n\n1. For WAP UI to work correctly, Wrap `WapUIProvider` provided by `wap-ui` at root of your application.\n\n```tsx\nimport React from 'react';\n\n// 1. import `WapUIProvider` component\nimport ReactDOM from 'react-dom/client';\nimport App from './App';\nimport { WapUIProvider } from 'wap-ui';\n\n// 2. Wrap WapUIProvider at the root of your app\nReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(\n  \u003cWapUIProvider\u003e\n    \u003cApp /\u003e\n  \u003c/WapUIProvider\u003e,\n);\n```\n\n2. Bring components what you want and use them.\n\n```tsx\nimport { Button } from 'wap-ui';\n\nconst Home = () =\u003e {\n  return (\n    \u003cButton size=\"md\" color=\"success\" shadow\u003e\n      버튼\n    \u003c/Button\u003e\n  );\n};\n\nexport default Home;\n```\n\n3. You can refer to the components through Documents or Jsdocs like that.\n\u003ctable align=\"center\"\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      Documents\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      Jsdocs\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" \u003e\n      \u003cimg src=\"https://user-images.githubusercontent.com/75781414/209562964-ae0b74b4-c604-4ac7-94d6-b5f0a3cb4a02.png\" width=\"100%\" /\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://user-images.githubusercontent.com/75781414/209560523-74cb3b4e-f1e9-4a5d-a5e1-ae54c2aa4150.png\" width=\"100%\" /\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e  \n\u003c/table\u003e\n\n## `Contributors`\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/neko113\"\u003e\n        \u003cimg src=\"https://avatars.githubusercontent.com/u/75781414?v=4\" width=\"120px;\"/\u003e\n        \u003cbr /\u003e\n        \u003ca href=\"https://github.com/pknu-wap/wap-ui/commits/main?author=neko113\" title=\"Code\"\u003eneko113 💻\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/sjyoung428\"\u003e\n        \u003cimg src=\"https://avatars.githubusercontent.com/u/77968955?v=4\" width=\"120px;\"/\u003e\n        \u003cbr /\u003e\n        \u003ca href=\"https://github.com/pknu-wap/wap-ui/commits/main?author=sjyoung428\" title=\"Code\"\u003esjyoung428 💻\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/mimpie\"\u003e\n        \u003cimg src=\"https://avatars.githubusercontent.com/u/108365477?v=4\" width=\"120px;\"/\u003e\n        \u003cbr /\u003e\n        \u003ca href=\"https://github.com/pknu-wap/wap-ui/commits/main?author=mimpie\" title=\"Code\"\u003emimpie 💻\u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e컴공19 김민수\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e컴공16 성준영\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e컴공21 이예슬\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## `Links`\n\n- #### [Documents](https://github.com/pknu-wap/wap-ui/tree/main/docs)\n- #### [NPM](https://www.npmjs.com/package/wap-ui)\n- #### [Playground](https://wap-ui.vercel.app/)\n- #### [Presentations](https://github.com/pknu-wap/wap-ui/tree/main/ppt)\n- #### [Example](https://github.com/pknu-wap/wap-ui/tree/main/example)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpknu-wap%2Fwap-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpknu-wap%2Fwap-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpknu-wap%2Fwap-ui/lists"}