{"id":49815730,"url":"https://github.com/alansinbailarin/mood-ui","last_synced_at":"2026-05-29T06:02:36.881Z","repository":{"id":355348121,"uuid":"1227768831","full_name":"alansinbailarin/mood-ui","owner":"alansinbailarin","description":"80+ accessible Vue 3 components · reactive theming · dark mode · i18n · Tailwind v4","archived":false,"fork":false,"pushed_at":"2026-05-28T22:18:36.000Z","size":8203,"stargazers_count":17,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-05-28T23:17:28.386Z","etag":null,"topics":["components","components-library","design","design-system","javascript","kit","library","theming","typescript","ui","uikit","vue","vue3"],"latest_commit_sha":null,"homepage":"https://mood-ui.com","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/alansinbailarin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-03T06:20:41.000Z","updated_at":"2026-05-28T22:18:39.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/alansinbailarin/mood-ui","commit_stats":null,"previous_names":["alansinbailarin/modo-components"],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/alansinbailarin/mood-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alansinbailarin%2Fmood-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alansinbailarin%2Fmood-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alansinbailarin%2Fmood-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alansinbailarin%2Fmood-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alansinbailarin","download_url":"https://codeload.github.com/alansinbailarin/mood-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alansinbailarin%2Fmood-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33639056,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-29T02:00:06.066Z","response_time":107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["components","components-library","design","design-system","javascript","kit","library","theming","typescript","ui","uikit","vue","vue3"],"created_at":"2026-05-13T06:13:47.587Z","updated_at":"2026-05-29T06:02:36.875Z","avatar_url":"https://github.com/alansinbailarin.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# mood-ui\n\n**The Vue 3 component library with the best vibes.**\n\n[![npm version](https://img.shields.io/npm/v/mood-ui?color=%236366f1\u0026label=npm)](https://www.npmjs.com/package/mood-ui)\n[![npm downloads](https://img.shields.io/npm/dw/mood-ui?color=%2322c55e\u0026label=downloads)](https://www.npmjs.com/package/mood-ui)\n[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\n[![Vue 3](https://img.shields.io/badge/Vue-3.x-%2342b883)](https://vuejs.org)\n[![Tailwind v4](https://img.shields.io/badge/Tailwind-v4-%2306b6d4)](https://tailwindcss.com)\n\n**81+ accessible components** · reactive theming · dark mode · i18n (ES + EN) · built with Vue 3, TypeScript \u0026 Tailwind v4.\n\n[**→ Live docs \u0026 playground**](https://mood-ui.com) · [npm](https://www.npmjs.com/package/mood-ui) · [Changelog](https://github.com/alansinbailarin/mood-ui/releases)\n\n\u003c/div\u003e\n\n---\n\n## Why mood-ui?\n\n- **Reactive theming** — change color, radius, size, halo and dark/light mode at runtime. Every component reacts instantly.\n- **Dark mode + surfaces** — 6 dark surface presets (navy, zinc, charcoal…) or tune all 14 semantic tokens yourself.\n- **i18n built-in** — Spanish \u0026 English included. Switch globally with `useLocale().set('es')`.\n- **Accessibility first** — WAI-ARIA roles, focus rings, keyboard nav and screen readers covered out of the box.\n- **Tree-shakeable · TypeScript** — import only what you use. Full types, IntelliSense autocomplete, ESM + CJS.\n- **Tailwind v4 native** — CSS vars, design tokens and `@theme inline`. Override from your own config, no hacks needed.\n\n---\n\n## Install\n\n```bash\nnpm install mood-ui\n\n# Required peer dependencies:\nnpm install vue@^3.4\n\n# Optional peers (only needed for specific components):\nnpm install @heroicons/vue@^2   # icons in Sidebar / Topbar / DropdownMenu\nnpm install gsap@^3             # animations in Toast / Drawer\n```\n\n## Setup\n\nImport the stylesheet once at your app entry:\n\n```ts\n// main.ts\nimport { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport \"mood-ui/style.css\";\n\ncreateApp(App).mount(\"#app\");\n```\n\nWrap your app in `\u003cModoProvider\u003e` to expose all design tokens to every component:\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from \"vue\";\nimport { ModoProvider, Button, paletteFromHex } from \"mood-ui\";\n\nconst primary = ref(\"#6366f1\");\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cModoProvider\n    color=\"primary\"\n    radius=\"medium\"\n    size=\"medium\"\n    :palettes=\"{ primary: paletteFromHex(primary) }\"\n  \u003e\n    \u003cButton color=\"primary\"\u003eHello mood-ui\u003c/Button\u003e\n  \u003c/ModoProvider\u003e\n\u003c/template\u003e\n```\n\n---\n\n## Powerhouse components — free, no license required\n\nMost UI libraries charge for these. mood-ui ships them out of the box.\n\n### `\u003cTable\u003e` — AG Grid-level features, zero cost\n\n```vue\n\u003cTable\n  :data=\"rows\"\n  :columns=\"cols\"\n  virtual              \u003c!-- renders 100k rows at constant speed --\u003e\n  tree                 \u003c!-- hierarchical rows with lazy loading --\u003e\n  server-side          \u003c!-- delegate sort/filter/page to your API --\u003e\n  resizable            \u003c!-- drag column edges to resize --\u003e\n  reorderable          \u003c!-- drag headers to reorder --\u003e\n  :multi-sort=\"true\"   \u003c!-- shift+click for multi-column sort --\u003e\n  v-model:state=\"savedState\"  \u003c!-- persist everything to localStorage/URL in one line --\u003e\n/\u003e\n```\n\nFull feature list: sorting · multi-sort · single/multi selection · per-column filters · row expansion · client \u0026 server-side pagination · column resize \u0026 reorder · virtualization (constant render time for 100k+ rows) · tree rows with lazy `loadChildren` · row grouping · state snapshot (`v-model:state`).\n\n---\n\n### `\u003cScheduler\u003e` — FullCalendar-level, zero cost\n\n```vue\n\u003cScheduler\n  :resources=\"rooms\"\n  :events=\"bookings\"\n  :draggable-events=\"true\"      \u003c!-- drag events between time slots --\u003e\n  :resizable-events=\"true\"      \u003c!-- resize event duration --\u003e\n  :allow-cross-resource-drag=\"true\"\n  :business-hours=\"officeHours\"\n  :prevent-overlap=\"true\"\n  format=\"12h\"\n/\u003e\n```\n\nFull feature list: resource rows · drag \u0026 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.\n\n---\n\n### Calendar suite — 5 views included\n\n`Calendar` · `MonthView` · `WeekView` · `DayView` · `AgendaView` — all with locale support, min/max dates, disabled dates/weekdays, and full theming via `ModoProvider`.\n\n---\n\n## All components\n\n| Category         | Components                                                                                                                                                                                                                                                   |\n| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| **Forms**        | `Button` `ButtonGroup` `FormField` `Input` `Textarea` `PasswordInput` `NumberInput` `SearchInput` `Select` `MultiSelect` `Combobox` `Checkbox` `Radio` `RadioGroup` `Switch` `Slider` `RangeSlider` `FileInput` `DateField` `DateRangeField` `DateTimeField` |\n| **Feedback**     | `Badge` `Banner` `Chip` `Drawer` `Loader` `Modal` `Skeleton` `Tooltip` `Toast` `ToastContainer` `ConfirmDialog` `EmptyState` `ProgressBar`                                                                                                                   |\n| **Layout**       | `AppShell` `Canvas` `Container` `Divider` `Stack` `HStack` `VStack` `PageHeader` `PopoverPanel` `Sidebar` `SidebarRow` `Topbar`                                                                                                                              |\n| **Navigation**   | `Tabs` `Breadcrumbs` `DropdownMenu` `Pagination`                                                                                                                                                                                                             |\n| **Data display** | `Card` `Typography` `Avatar` `AvatarGroup` `Table` `TableColumn` `TablePagination` `Calendar` `MonthView` `WeekView` `DayView` `AgendaView` `Scheduler` `DateRangePicker` `DateTimePicker`                                                                   |\n\n## Composables\n\n`useModoConfig` · `useResolvedColor` · `useResolvedRadius` · `useResolvedSize` · `useResolvedTheme` · `useResolvedHalo` · `useColorMode` · `useToast` · `useConfirm` · `useModoLocale` · `useLocaleString`\n\n---\n\n## Contributing\n\nmood-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.\n\n```bash\n# 1. Fork \u0026 clone\ngit clone https://github.com/alansinbailarin/mood-ui.git\ncd mood-ui\n\n# 2. Install dependencies\nnpm install\n\n# 3. Start the development showroom\nnpm run dev\n```\n\n- Check [open issues](https://github.com/alansinbailarin/mood-ui/issues) or open a new one to discuss your idea first.\n- Submit changes as a Pull Request against `main`.\n- Follow the existing patterns: Vue 3 + TypeScript + Tailwind v4, one component per file.\n\nIf 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.\n\n---\n\n## License\n\nMIT © [alansinbailarin](https://github.com/alansinbailarin)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falansinbailarin%2Fmood-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falansinbailarin%2Fmood-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falansinbailarin%2Fmood-ui/lists"}