https://github.com/alansinbailarin/mood-ui
80+ accessible Vue 3 components · reactive theming · dark mode · i18n · Tailwind v4
https://github.com/alansinbailarin/mood-ui
components components-library design design-system javascript kit library theming typescript ui uikit vue vue3
Last synced: 10 days ago
JSON representation
80+ accessible Vue 3 components · reactive theming · dark mode · i18n · Tailwind v4
- Host: GitHub
- URL: https://github.com/alansinbailarin/mood-ui
- Owner: alansinbailarin
- License: mit
- Created: 2026-05-03T06:20:41.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-05-28T22:18:36.000Z (10 days ago)
- Last Synced: 2026-05-28T23:17:28.386Z (10 days ago)
- Topics: components, components-library, design, design-system, javascript, kit, library, theming, typescript, ui, uikit, vue, vue3
- Language: Vue
- Homepage: https://mood-ui.com
- Size: 7.82 MB
- Stars: 17
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mood-ui
**The Vue 3 component library with the best vibes.**
[](https://www.npmjs.com/package/mood-ui)
[](https://www.npmjs.com/package/mood-ui)
[](LICENSE)
[](https://vuejs.org)
[](https://tailwindcss.com)
**81+ accessible components** · reactive theming · dark mode · i18n (ES + EN) · built with Vue 3, TypeScript & Tailwind v4.
[**→ Live docs & playground**](https://mood-ui.com) · [npm](https://www.npmjs.com/package/mood-ui) · [Changelog](https://github.com/alansinbailarin/mood-ui/releases)
---
## Why mood-ui?
- **Reactive theming** — change color, radius, size, halo and dark/light mode at runtime. Every component reacts instantly.
- **Dark mode + surfaces** — 6 dark surface presets (navy, zinc, charcoal…) or tune all 14 semantic tokens yourself.
- **i18n built-in** — Spanish & English included. Switch globally with `useLocale().set('es')`.
- **Accessibility first** — WAI-ARIA roles, focus rings, keyboard nav and screen readers covered out of the box.
- **Tree-shakeable · TypeScript** — import only what you use. Full types, IntelliSense autocomplete, ESM + CJS.
- **Tailwind v4 native** — CSS vars, design tokens and `@theme inline`. Override from your own config, no hacks needed.
---
## Install
```bash
npm install mood-ui
# Required peer dependencies:
npm install vue@^3.4
# Optional peers (only needed for specific components):
npm install @heroicons/vue@^2 # icons in Sidebar / Topbar / DropdownMenu
npm install gsap@^3 # animations in Toast / Drawer
```
## Setup
Import the stylesheet once at your app entry:
```ts
// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import "mood-ui/style.css";
createApp(App).mount("#app");
```
Wrap your app in `` to expose all design tokens to every component:
```vue
import { ref } from "vue";
import { ModoProvider, Button, paletteFromHex } from "mood-ui";
const primary = ref("#6366f1");
Hello mood-ui
```
---
## Powerhouse components — free, no license required
Most UI libraries charge for these. mood-ui ships them out of the box.
### `` — AG Grid-level features, zero cost
```vue
tree
server-side
resizable
reorderable
:multi-sort="true"
v-model:state="savedState"
/>
```
Full feature list: sorting · multi-sort · single/multi selection · per-column filters · row expansion · client & server-side pagination · column resize & reorder · virtualization (constant render time for 100k+ rows) · tree rows with lazy `loadChildren` · row grouping · state snapshot (`v-model:state`).
---
### `` — FullCalendar-level, zero cost
```vue
:resizable-events="true"
:allow-cross-resource-drag="true"
:business-hours="officeHours"
:prevent-overlap="true"
format="12h"
/>
```
Full feature list: resource rows · drag & drop events · resize events · cross-resource drag · range selection · business hours · disabled time ranges · all-day row · current time indicator · keyboard navigation · 12h/24h · readonly mode.
---
### Calendar suite — 5 views included
`Calendar` · `MonthView` · `WeekView` · `DayView` · `AgendaView` — all with locale support, min/max dates, disabled dates/weekdays, and full theming via `ModoProvider`.
---
## All components
| Category | Components |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Forms** | `Button` `ButtonGroup` `FormField` `Input` `Textarea` `PasswordInput` `NumberInput` `SearchInput` `Select` `MultiSelect` `Combobox` `Checkbox` `Radio` `RadioGroup` `Switch` `Slider` `RangeSlider` `FileInput` `DateField` `DateRangeField` `DateTimeField` |
| **Feedback** | `Badge` `Banner` `Chip` `Drawer` `Loader` `Modal` `Skeleton` `Tooltip` `Toast` `ToastContainer` `ConfirmDialog` `EmptyState` `ProgressBar` |
| **Layout** | `AppShell` `Canvas` `Container` `Divider` `Stack` `HStack` `VStack` `PageHeader` `PopoverPanel` `Sidebar` `SidebarRow` `Topbar` |
| **Navigation** | `Tabs` `Breadcrumbs` `DropdownMenu` `Pagination` |
| **Data display** | `Card` `Typography` `Avatar` `AvatarGroup` `Table` `TableColumn` `TablePagination` `Calendar` `MonthView` `WeekView` `DayView` `AgendaView` `Scheduler` `DateRangePicker` `DateTimePicker` |
## Composables
`useModoConfig` · `useResolvedColor` · `useResolvedRadius` · `useResolvedSize` · `useResolvedTheme` · `useResolvedHalo` · `useColorMode` · `useToast` · `useConfirm` · `useModoLocale` · `useLocaleString`
---
## Contributing
mood-ui is **open source and open to contributions**. Whether it's fixing a bug, proposing a new component, improving docs or just giving feedback — every bit helps.
```bash
# 1. Fork & clone
git clone https://github.com/alansinbailarin/mood-ui.git
cd mood-ui
# 2. Install dependencies
npm install
# 3. Start the development showroom
npm run dev
```
- Check [open issues](https://github.com/alansinbailarin/mood-ui/issues) or open a new one to discuss your idea first.
- Submit changes as a Pull Request against `main`.
- Follow the existing patterns: Vue 3 + TypeScript + Tailwind v4, one component per file.
If mood-ui saves you time, a ⭐ on [GitHub](https://github.com/alansinbailarin/mood-ui) goes a long way — it helps other developers discover the library.
---
## License
MIT © [alansinbailarin](https://github.com/alansinbailarin)