{"id":17152067,"url":"https://github.com/selemondev/windi-ui","last_synced_at":"2025-04-03T00:07:37.443Z","repository":{"id":187443492,"uuid":"668737074","full_name":"selemondev/windi-ui","owner":"selemondev","description":"Build Accessible Apps 10x faster with Windi UI ⚡ ( WIP :construction: )","archived":false,"fork":false,"pushed_at":"2024-10-01T06:28:53.000Z","size":1586,"stargazers_count":37,"open_issues_count":6,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-24T07:02:41.707Z","etag":null,"topics":["tailwindcss-ui","typescript","typescript-library","vue","vue-component-library","vue-components","vue-ui","vue-ui-components","vue3-component-library","vue3-components","vue3-ui","vue3-ui-framework","vuejs"],"latest_commit_sha":null,"homepage":"https://ui-windi.netlify.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/selemondev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-20T13:32:04.000Z","updated_at":"2024-12-01T01:10:02.000Z","dependencies_parsed_at":"2024-01-12T00:12:31.634Z","dependency_job_id":"e05c2304-835d-4a48-9087-b901b49b92ab","html_url":"https://github.com/selemondev/windi-ui","commit_stats":{"total_commits":123,"total_committers":3,"mean_commits":41.0,"dds":0.1707317073170732,"last_synced_commit":"4e2ae541373516cd8d93a27b1fa44cd8a45993cc"},"previous_names":["selemondev/windi-ui"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selemondev%2Fwindi-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selemondev%2Fwindi-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selemondev%2Fwindi-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selemondev%2Fwindi-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/selemondev","download_url":"https://codeload.github.com/selemondev/windi-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246911498,"owners_count":20853657,"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":["tailwindcss-ui","typescript","typescript-library","vue","vue-component-library","vue-components","vue-ui","vue-ui-components","vue3-component-library","vue3-components","vue3-ui","vue3-ui-framework","vuejs"],"created_at":"2024-10-14T21:42:44.461Z","updated_at":"2025-04-03T00:07:37.422Z","avatar_url":"https://github.com/selemondev.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"./docs/docs/public/windi.svg\" style=\"width:100px;\" /\u003e\n\u003ch1 align=\"center\"\u003eWindi UI 🚧\u003c/h1\u003e\n\u003cp align=\"center\"\u003eBuild Accessible Apps 10x faster.\u003c/p\u003e\n\u003c/p\u003e\n\n## Features\n\n- 🦾 **TypeScript Support** - Built with TypeScript in mind and from the ground up.\n- 🔥 **Icon** - Use any icon from [Iconify](https://icones.netlify.app/) in your project from your favourite icon set.\n-  🛠️ **On Demand Import** - Windi UI comes with an intelligent resolver that automatically imports only used components.\n- 📦 **Diverse Component Selection** - Create your application effortlessly with our expansive collection of 50+ UI components.\n- ⚡️ **Powerful Tools** - Windi UI is built on top of powerful tools such as TailwindCss, VueUse, Headless UI etc.\n- 🎨 **Themeable** - Customize any part of our beautiful components to match your style.\n\n## Getting Started \n\nAdd `Windi UI` to your project by running one of the following commands below:\n\n```bash\n\n# pnpm\npnpm add windi-vue\n\n# yarn\nyarn add windi-vue\n\n# npm\nnpm install windi-vue\n\n```\n\n## Usage\n\n1. Add the Windi UI theme file and the darkMode class in your tailwind.config.cjs file as shown below:\n\n```ts\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}', 'node_modules/windi-vue/dist/theme/*.{js,jsx,ts,tsx,vue}'],\n  darkMode: 'class',\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}\n```\n\n\n### Component registration\n\nWith Windi UI, you have the flexibility to register components precisely as you wish:\n\n### Import All Components\n\nTo import all the components provided by `Windi UI`, add `WindiUI` in your main entry file as shown below:\n\n```ts\nimport { createApp } from 'vue'\nimport windiTheme from 'windi-vue/dist/theme/windiTheme'\nimport WindiUI from 'windi-vue'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.use(WindiUI, windiTheme)\napp.mount('#app')\n```\n\n**By doing this, you are importing all the components that are provided by Windi UI and in your final bundle all the components including the ones you didn't use will be bundled. Use this method of component registration if you are confident that you will use all the components.**\n\n### Individual Components with Tree Shaking\n\nProbably you might not want to globally register all the components but instead only import the components that you need. You can achieve this by doing the following: \n\n1. Import the `createWindiUI` option as well as the components you need as shown below:\n\n```ts\nimport { createApp } from 'vue'\nimport './style.css'\nimport windiTheme from 'windi-vue/dist/theme/windiTheme'\n\nimport { WKbd, createWindiUI } from 'windi-vue'\n\nimport App from './App.vue'\n\nconst app = createApp(App)\n\nconst UI = createWindiUI({\n  prefix: 'T',\n  components: [WKbd],\n})\n\napp.use(UI, windiTheme)\n\napp.mount('#app')\n```\n\n2. Now you can use the component as shown below:\n\n```js\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cTKbd\u003eK\u003c/TKbd\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\nThe `prefix` option is only available for individual component imports.\n\n### Auto Imports with Tree Shaking\n\n**Windi UI** comes with an intelligent resolver that automatically imports only used components.\n\nThis is made possible by leveraging a tool known as [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) which lets you auto import components on demand thus omitting import statements and still get the benefits of tree shaking.\n\nTo achieve this you need to do the following: \n\n1. Install the `unplugin-vue-components` package by running one of the following commands:\n\n```bash\n\n#pnpm\npnpm add -D unplugin-vue-components\n\n#yarn\nyarn add -D unplugin-vue-components\n\n#npm\nnpm i -D unplugin-vue-components\n\n```\n\n2. Head over to your `main.ts` or `main.js` file and set `registerComponents` to `false` as shown below:\n\n```ts\nimport { createApp } from 'vue'\nimport './style.css'\nimport windiTheme from 'windi-vue/dist/theme/windiTheme'\n\nimport { createWindiUI } from 'windi-vue'\n\nimport App from './App.vue'\n\nconst app = createApp(App)\n\nconst UI = createWindiUI({\n  registerComponents: false,\n})\n\napp.use(UI, windiTheme)\n\napp.mount('#app')\n```\n\n3. Head over to your `vite.config.ts` or `vite.config.js` file and add the following:\n\n```ts\n// other imports\nimport { WindiUIComponentResolver } from 'windi-vue'\nimport Components from 'unplugin-vue-components/vite'\n\nexport default defineConfig({\n  plugins: [\n    // other plugins\n    Components({\n      resolvers: [\n        WindiUIComponentResolver()\n      ]\n    }),\n  ],\n})\n```\n\n4. Now you can simply use any component that you want and it will be auto imported on demand ✨\n\n```js\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cWKbd\u003eK\u003c/WKbd\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Troubleshooting TypeScript Error\n\nIf you're encountering the TypeScript error: **Cannot find module 'windi-vue/dist/theme/windiTheme' or its corresponding type declarations**, you can follow these steps to resolve it:\n\n1. Create a `windi-vue.d.ts` declaration file in your `src` directory and inside it paste the following code:\n\n```ts\ndeclare module 'windi-vue/dist/theme/windiTheme'\n```\n\nThe error should now be resolved.\n\nThis issue is set to be fixed in the next release of **Windi UI v0.0.1 Alpha**\n\n\n🥳 Well done, you can now go ahead and build your web application with ease.\n\n## Contributions\n\nContributions are welcome and encouraged! If you have any ideas or suggestions for new features, or if you encounter any bugs or issues, please open an issue or submit a pull request on the GitHub repository. \n\nDevelopers interested in contributing should read the [Code of Conduct](./CODE_OF_CONDUCT.md) and the [Contributing Guide](./CONTRIBUTING.md).\n\n## Credits\n\n- [@headlessui/vue](https://headlessui.com)\n- [@vueuse/core](https://vueuse.org)\n- [TailwindCss](https://tailwindcss.com)\n- [UnoCss](https://unocss.com) for the landing page rainbow animation.\n\n## License\n\n[MIT](./LICENSE) License © 2023 [Selemondev](https://github.com/selemondev)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fselemondev%2Fwindi-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fselemondev%2Fwindi-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fselemondev%2Fwindi-ui/lists"}