{"id":16170738,"url":"https://github.com/holtwick/oui","last_synced_at":"2025-08-05T04:07:18.581Z","repository":{"id":216615929,"uuid":"741538668","full_name":"holtwick/oui","owner":"holtwick","description":"Just another set of UI components for Vue.js with a proper French-sounding name.","archived":false,"fork":false,"pushed_at":"2024-04-26T16:15:49.000Z","size":549,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-02T00:07:46.642Z","etag":null,"topics":["oui","typescript","ui-components","vite","vue","vue3"],"latest_commit_sha":null,"homepage":"https://oui.holtwick.de","language":"Vue","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/holtwick.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["holtwick"]}},"created_at":"2024-01-10T15:52:48.000Z","updated_at":"2024-06-14T07:20:16.626Z","dependencies_parsed_at":"2024-02-05T15:56:20.722Z","dependency_job_id":"65e52de9-80ee-4c66-99bc-959544547d59","html_url":"https://github.com/holtwick/oui","commit_stats":null,"previous_names":["holtwick/oui"],"tags_count":198,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holtwick%2Foui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holtwick%2Foui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holtwick%2Foui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holtwick%2Foui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/holtwick","download_url":"https://codeload.github.com/holtwick/oui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244331526,"owners_count":20435954,"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":["oui","typescript","ui-components","vite","vue","vue3"],"created_at":"2024-10-10T03:19:32.465Z","updated_at":"2025-08-05T04:07:18.568Z","avatar_url":"https://github.com/holtwick.png","language":"Vue","funding_links":["https://github.com/sponsors/holtwick"],"categories":[],"sub_categories":[],"readme":"# 🎨 Oui Kit\n\n\u003cdiv align=\"center\"\u003e\n\n🎯 *UI toolkit with a French touch* 🇫🇷\n\n**Modern • Lightweight • TypeScript-first • Accessible**\n\n[![npm version](https://img.shields.io/npm/v/oui-kit.svg)](https://www.npmjs.com/package/oui-kit)\n[![license](https://img.shields.io/npm/l/oui-kit.svg)](https://github.com/holtwick/oui/blob/main/LICENSE)\n[![downloads](https://img.shields.io/npm/dm/oui-kit.svg)](https://www.npmjs.com/package/oui-kit)\n\n[🚀 Get Started](#installation) • [📚 Documentation](https://oui.holtwick.de) • [🎮 Live Demo](https://oui.holtwick.de)\n\n\u003c/div\u003e\n\n## ✨ Why Oui Kit?\n\n- 🎯 **Vue 3 Native** - Built from the ground up for Vue 3 Composition API\n- 🎨 **Stylus Powered** - Flexible theming system with Stylus CSS\n- 📦 **Tree Shakeable** - Import only what you need\n- 🔧 **TypeScript First** - Full TypeScript support out of the box\n- ♿ **Accessible** - WCAG compliant components\n- 🪶 **Lightweight** - Minimal bundle size impact\n- 🎛️ **Customizable** - Easy to theme and extend\n\n---\n\n🎮 **Try it live:** \u003chttps://oui.holtwick.de\u003e\n\n📱 **Scan QR code for mobile demo:**\n\n\u003cimg src=\"./qrcode.png\" alt=\"QR Code to demo website\" style=\"max-width: 20rem\"\u003e\n\n## 🚀 Quick Start\n\nGet up and running in under 2 minutes!\n\n```bash\nnpm install oui-kit\n# or\npnpm add oui-kit\n# or\nyarn add oui-kit\n```\n\n## 🎯 Usage\n\n### Basic Setup\n\n```typescript\n// main.ts\nimport { createApp } from 'vue'\nimport App from './App.vue'\n\n// Import oui-kit styles\nimport 'oui-kit/css'\n\nconst app = createApp(App)\napp.mount('#app')\n```\n\n### Your First Component\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { OuiButton, OuiModal, useNotification } from 'oui-kit'\nimport { ref } from 'vue'\n\nconst showModal = ref(false)\nconst { notify } = useNotification()\n\nfunction handleSuccess() {\n  notify('🎉 Success! Your component is working!', 'success')\n}\n\nfunction handleInfo() {\n  notify('ℹ️ This is an info message', 'info')\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv class=\"demo-container\"\u003e\n    \u003ch2\u003eWelcome to Oui Kit!\u003c/h2\u003e\n\n    \u003cdiv class=\"button-group\"\u003e\n      \u003cOuiButton variant=\"primary\" @click=\"handleSuccess\"\u003e\n        🎉 Show Success\n      \u003c/OuiButton\u003e\n\n      \u003cOuiButton variant=\"secondary\" @click=\"handleInfo\"\u003e\n        ℹ️ Show Info\n      \u003c/OuiButton\u003e\n\n      \u003cOuiButton variant=\"outline\" @click=\"showModal = true\"\u003e\n        📱 Open Modal\n      \u003c/OuiButton\u003e\n    \u003c/div\u003e\n\n    \u003cOuiModal v-model=\"showModal\" title=\"🎨 Hello from Oui Kit!\"\u003e\n      \u003cp\u003eThis modal demonstrates the power of Oui Kit components.\u003c/p\u003e\n      \u003cp\u003eEnjoy building beautiful Vue.js applications! 🚀\u003c/p\u003e\n    \u003c/OuiModal\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cstyle lang=\"stylus\"\u003e\n@import 'oui-kit/stylus'\n\n.demo-container\n  padding: $spacing-lg\n  max-width: 600px\n  margin: 0 auto\n\n.button-group\n  display: flex\n  gap: $spacing-md\n  flex-wrap: wrap\n  margin-top: $spacing-md\n\u003c/style\u003e\n```\n\n## 🧩 Available Components\n\n### 🎨 UI Components\n\n| Component | Description | Features |\n|-----------|-------------|----------|\n| **OuiButton** | Versatile button component | Multiple variants, sizes, loading states |\n| **OuiModal** | Beautiful modal dialogs | Backdrop blur, animations, accessibility |\n| **OuiNotification** | Toast notification system | Auto-dismiss, positions, custom styling |\n| **OuiFloat** | Floating positioning | Tooltips, dropdowns, popovers |\n\n### 🔧 Composables \u0026 Utilities\n\n| Composable | Description | Use Case |\n|------------|-------------|----------|\n| **useNotification** | Reactive notification system | Show success/error messages |\n| **useModal** | Modal state management | Programmatic modal control |\n| **useFloat** | Floating element positioning | Tooltips, dropdowns, menus |\n\n### Tree Shaking\n\n```typescript\n// Import only what you need\nimport * as OuiKit from 'oui-kit'\n// Or import everything (not recommended for production)\nimport { OuiButton, OuiModal, useNotification } from 'oui-kit'\nimport { OuiButton } from 'oui-kit/button'\nimport { OuiModal } from 'oui-kit/modal'\n\nimport { useNotification } from 'oui-kit/notification'\n```\n\n## 🛠️ Development\n\n### Prerequisites\n\n- Node.js 18+\n- pnpm (recommended) or npm\n\n### Contributing\n\nWe welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md) for details on:\n\n- Code style and formatting\n- Testing requirements\n- Git workflow and commit conventions\n- Development setup\n\n## Browser Support\n\noui-kit supports all modern browsers:\n\n- Chrome 88+\n- Firefox 85+\n- Safari 14+\n- Edge 88+\n\n## License\n\nMIT License - see [LICENSE](./LICENSE) file for details.\n\n## Acknowledgments\n\nDerives from this previous work:\n\n- [twindy](https://github.com/holtwick/twindy)\n- [twindy-headless](https://github.com/holtwick/twindy-headless)\n\n## Support\n\n- 📖 [Documentation](https://oui.holtwick.de)\n- 🐛 [Issues](https://github.com/holtwick/oui/issues)\n- 💬 [Discussions](https://github.com/holtwick/oui/discussions)\n- ❤️ [Sponsor](https://github.com/sponsors/holtwick)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fholtwick%2Foui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fholtwick%2Foui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fholtwick%2Foui/lists"}