Installation

Before you start

You need a Meeko application, Node.js 24 or later and a Meeko version in the range >=1.8 <2. UI belongs to the Meeko ecosystem and ships as a separate package.

Install the package

pnpm add @meekojs/ui

Register the module

Register it by name: its options go under the ui key, typed without importing anything. Components are registered with the UI prefix.

import { defineMeekoConfig } from '@meekojs/meeko/framework'

export default defineMeekoConfig({
  modules: ['@meekojs/ui'],
  theme: { default: 'dark' },
})

The module registers its CSS and Vite processes it with your project's PostCSS. You do not need to import a stylesheet by hand or add another processor.

Add UIApp

Wrap your application to host the modals opened with useModal(). The module's plugin creates the manager and UIApp renders its stack.

<!-- app/app.meeko -->
<template>
  <UIApp>
    <MeekoOutlet />
  </UIApp>
</template>

Use a component

<script lang="ts">
  const count = signal(0)
</script>

<template>
<UIButton on:click="() => count.value++">Save changes</UIButton>
<UIButton variant="outline">Cancel</UIButton>
<UIButton size="sm" disabled>Unavailable</UIButton>
<p role="status">Changes: {count.value}</p>
</template>

Continue with theming and customization or explore all components.