🎯 UI toolkit with a French touch 🇫🇷
Modern • Lightweight • TypeScript-first • Accessible
🚀 Get Started • 📚 Documentation • 🎮 Live Demo • 📖 Component Reference
- 🎯 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: https://oui.holtwick.de
📱 Scan QR code for mobile demo:
npm install oui-kit
# or
pnpm add oui-kit
# or
yarn add oui-kit// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import 'oui-kit/css'
const app = createApp(App)
app.mount('#app')<script setup lang="ts">
import { emitNotificationInfo, OuiButton, OuiModal } from 'oui-kit'
import { ref } from 'vue'
const showModal = ref(false)
</script>
<template>
<div>
<OuiButton mode="primary" @click="emitNotificationInfo('Success', 'It works!')">
Show Notification
</OuiButton>
<OuiButton mode="outline" @click="showModal = true">
Open Modal
</OuiButton>
<OuiModal v-model="showModal" title="Hello from Oui Kit!" close>
<p>This modal demonstrates the power of Oui Kit components.</p>
</OuiModal>
</div>
</template>
<style lang="stylus">
@import 'oui-kit/stylus'
</style>Add the activator once in your app root, then emit notifications from anywhere:
<!-- App.vue -->
<OuiNotificationActivator />import { emitNotificationInfo, emitNotificationWarn, emitNotificationError } from 'oui-kit'
emitNotificationInfo('Saved', 'Your changes have been saved.')
emitNotificationWarn('Low storage', 'Less than 10% remaining.')
emitNotificationError('Upload failed', 'Please try again.')See COMPONENTS.md for the full API reference including props, events, slots, and examples.
OuiButton · OuiInput · OuiInputNumber · OuiInputColor · OuiInputGroup · OuiTextarea · OuiPassword · OuiCheckbox · OuiSelect · OuiCombobox · OuiSegmented · OuiFile · OuiDate · OuiDatetime · OuiDay · OuiDayRange · OuiStars · OuiSlidingPill
OuiCard · OuiText · OuiNotice · OuiSeparator · OuiItems · OuiTable · OuiTableview · OuiVirtualList · OuiLog · OuiQrcode · OuiWait
OuiStackX · OuiStackY · OuiSpace
OuiFloat · OuiMenu · OuiTooltipActivator
OuiModal · OuiDialog · ouiAlert() · ouiConfirm() · ouiPrompt()
OuiNotificationActivator · emitNotificationInfo() · emitNotificationWarn() · emitNotificationError()
OuiDark · OuiObject · OuiMobileActivator · OuiResizeable · OuiDraggable
Oui uses CSS custom properties with a structured naming scheme: --[level]-[style]-[state].
:root {
/* Override the primary colour palette */
--p1-500: #e85d04;
--p1-400: #f48c06;
--p1-600: #dc2f02;
}Dark mode is activated via the .dark class on <html> (not via @media):
import { useDark } from '@vueuse/core'
const isDark = useDark() // automatically toggles .dark on <html>See COMPONENTS.md – Theming for the full variable reference.
- Node.js 18+
- pnpm (recommended)
pnpm install # install dependencies
pnpm dev # start dev server
pnpm build # build library
pnpm test --run # run tests
pnpm lint # lint
pnpm lint:fix # auto-fix lint issuesWe welcome contributions! Please see our Contributing Guide for details.
Chrome 88+ · Firefox 85+ · Safari 14+ · Edge 88+
MIT – see LICENSE for details.
Derives from previous work:
- 📖 Documentation
- 📖 Component Reference
- 🐛 Issues
- 💬 Discussions
- ❤️ Sponsor