🎨 Oui Kit

🎯 UI toolkit with a French touch 🇫🇷

Modern • Lightweight • TypeScript-first • Accessible


🚀 Get Started • 📚 Documentation • 🎮 Live Demo

✨ Why Oui Kit?

- 🎯 Vue 3 Native - Built from the ground up for Vue 3 Composition API
- 🎨 Stylus Powered - Flexible theming system with Stylus CSS
- 📦 Tree Shakeable - Import only what you need
- 🔧 TypeScript First - Full TypeScript support out of the box
- ♿ Accessible - WCAG compliant components
- 🪶 Lightweight - Minimal bundle size impact
- 🎛️ Customizable - Easy to theme and extend

---

🎮 Try it live:

📱 Scan QR code for mobile demo:

🚀 Quick Start

Get up and running in under 2 minutes!

``bash
npm install oui-kit


or

pnpm add oui-kit

or

yarn add oui-kit
`

🎯 Usage

$3

`typescript
// main.ts
import { createApp } from 'vue'
import App from './App.vue'

// Import oui-kit styles
import 'oui-kit/css'

const app = createApp(App)
app.mount('#app')
`

$3

`vue



`

🧩 Available Components

$3

| Component | Description | Features |
|-----------|-------------|----------|
| OuiButton | Versatile button component | Multiple variants, sizes, loading states |
| OuiModal | Beautiful modal dialogs | Backdrop blur, animations, accessibility |
| OuiNotification | Toast notification system | Auto-dismiss, positions, custom styling |
| OuiFloat | Floating positioning | Tooltips, dropdowns, popovers |

$3

| Composable | Description | Use Case |
|------------|-------------|----------|
| useNotification | Reactive notification system | Show success/error messages |
| useModal | Modal state management | Programmatic modal control |
| useFloat | Floating element positioning | Tooltips, dropdowns, menus |

$3

`typescript
// Import only what you need
import * as OuiKit from 'oui-kit'
// Or import everything (not recommended for production)
import { OuiButton, OuiModal, useNotification } from 'oui-kit'
import { OuiButton } from 'oui-kit/button'
import { OuiModal } from 'oui-kit/modal'

import { useNotification } from 'oui-kit/notification'
``

🛠️ Development

$3

- Node.js 18+
- pnpm (recommended) or npm

$3

We welcome contributions! Please see our Contributing Guide for details on:

- Code style and formatting
- Testing requirements
- Git workflow and commit conventions
- Development setup

Browser Support

oui-kit supports all modern browsers:

- Chrome 88+
- Firefox 85+
- Safari 14+
- Edge 88+

License

MIT License - see LICENSE file for details.

Acknowledgments

Derives from this previous work:

- twindy
- twindy-headless

Support

- 📖 Documentation
- 🐛 Issues
- 💬 Discussions
- ❤️ Sponsor