Pro

@ziyarago/ui is MIT and complete for real products. @ziyarago/ui-pro is a separate package that adds 110 components and templates, 13 more interface languages and the migration layer from local glass-ui-kit copies. It plugs into the same registry, themes and tokens as the core.

Core and Pro

Everything not listed below is in Core. The list is generated from the tier table of the library, the same one that marks components Pro in the catalog.

Install

You receive a tarball, ziyarago-ui-pro-<version>.tgz. Do not commit it to a public repository. Its version follows the core (Pro 0.22.x goes with @ziyarago/ui 0.22.x). The peer range of the tarball starts at the exact core version it was built against and ends before the next minor, so update both packages together.

npm i ./ziyarago-ui-pro-<version>.tgz
# or in package.json: "@ziyarago/ui-pro": "file:vendor/ziyarago-ui-pro-<version>.tgz"

Set up

Import the core stylesheet once. Pro components are styled by it, so no extra CSS is required.

import { createApp } from 'vue'
import '@ziyarago/ui/style.css'
import { UiButton } from '@ziyarago/ui/vue'
import { UiLineChart } from '@ziyarago/ui-pro/vue'   // one Pro component, nothing else is pulled in

// components imported by name work in templates without app.use()
createApp(App).mount('#app')

@ziyarago/ui-pro/style.css is reserved for Pro-only rules and can be imported after the core file; today every Pro class is already in @ziyarago/ui/style.css.

import '@ziyarago/ui/style.css'
import '@ziyarago/ui-pro/style.css'   // after the core file

The resolver and the Nuxt module read the list of Pro names from @ziyarago/ui-pro/names, so Pro has to be installed in the project that runs them. Without it Nuxt prints a warning and the Pro tags stay unresolved.

How registration works

• Every Pro export is created by defineUiComponent(name, definition), annotated as pure. Importing @ziyarago/ui-pro/vue registers nothing by itself: a component is registered when its export is part of your bundle.
• A bundler therefore keeps only the Pro components you import, the core definitions they depend on (deps) and their strings. The same holds for the core since 0.21.0: a Vue app with only UiButton went from 32 KB to 4.7 KB gzip.
• Registration also feeds the shared registry, so a Pro component can use C.Button and core pages can reference it.
• app.use(ui) from @ziyarago/ui/vue registers every core component plus only the Pro components that were imported. That is the one place where the whole core is included; for the smallest bundle import components by name.
• With the Nuxt module and the Vite resolver the import is generated per tag, so nothing needs to be imported by hand.

import { createApp } from 'vue'
import ui from '@ziyarago/ui/vue'
import { UiLineChart } from '@ziyarago/ui-pro/vue'   // imported somewhere in the app: now registered

createApp(App).use(ui)
// app.use(ui) registers every core component and only the Pro components imported (UiLineChart here).
// A Pro tag that is never imported is not registered: Vue warns "Failed to resolve component".

Writing your own add-on

The same API is public. @ziyarago/ui/internal exports every built-in <Name>Def and the helpers the definitions use; it is semi-internal and may change in a minor release. Definitions without deps still work through defineUiComponents(defs) but then load the whole core registry.

import { defineUiComponent } from '@ziyarago/ui/vue'     // or '@ziyarago/ui/react'
import { ButtonDef } from '@ziyarago/ui/internal'         // every built-in <Name>Def

const MyCardDef = { deps: () => ({ Button: ButtonDef }), render: ({ C, h }) => h(C.Button, null, 'Hi') }
export const UiMyCard = /*#__PURE__*/ defineUiComponent('MyCard', MyCardDef)

// what the Pro entry does for each component (generated, shown for add-on authors)
import { defineUiComponent } from '@ziyarago/ui/vue'
import { LineChartDef } from '../core/defs.pro.js'
export const UiLineChart = /*#__PURE__*/ defineUiComponent('LineChart', LineChartDef)

Languages

The strings of a Pro component in English, Arabic and Russian travel with the component. The other 13 (uz, tg, tr, fr, fa, hi, ur, bn, id, kk, ky, ms, ha) are one side-effect import. A missing language shows English. See Localization for switching, RTL and overrides.

import '@ziyarago/ui-pro/languages'      // once, before the app mounts
import { setUiLocale } from '@ziyarago/ui/i18n'
setUiLocale('uz')

Migrating from glass-ui-kit (compat layer)

For apps that keep local copies of @ziyarago/glass-ui-kit as src/components/ui/Ui*.vue. The compat layer is Vue only and exports the OLD component names (UiInput, UiTable, UiSidebar, useToast, useTheme and more) as thin wrappers over the new components with the old props, slots and events. The plan has two phases, so nothing has to be rewritten on day one:

1. Switch the imports to @ziyarago/ui-pro/compat (automatically, with the resolver and the Vite plugin below) and delete src/components/ui.
2. Move to the new names (UiTextField, UiDataTable, UiSideNav ...) one component at a time and drop the wrappers you no longer use.

// vite.config.ts (the redirect plugin runs before vue())
import Components from 'unplugin-vue-components/vite'
import { ZiyaragoCompatResolver } from '@ziyarago/ui-pro/compat/resolver'
import { ziyaragoCompat } from '@ziyarago/ui-pro/compat/vite'

export default defineConfig({
  plugins: [
    ziyaragoCompat(),     // rewrites imports of ".../components/ui/..." to "@ziyarago/ui-pro/compat"
    vue(),
    Components({
      dirs: ['src/components'],
      resolvers: [ZiyaragoCompatResolver()],   // <UiInput>, <UiTable>, ... resolve to the compat wrappers
    }),
  ],
})

With the resolver the old tags in templates, and with the plugin the old script imports (useToast, types such as SelectOption and TableColumn), point to compat. The resolver wins over the local files, so you can test with src/components/ui still in place. If you use both resolvers, put ZiyaragoCompatResolver() before ZiyaragoUiResolver().

import { configureCompat } from '@ziyarago/ui-pro/compat'

configureCompat({
  sizes: 'height',   // default: old pixel heights are kept (old md 48px renders as new lg)
  warn: true,        // dev warnings for props the new components cannot honour
})

// src/composables/useTheme.ts
export { useTheme } from '@ziyarago/ui-pro/compat'

The shim keeps the old useTheme() signature, sets both data-theme and the .dark class, and adopts the old stored value on first run. Built-in texts of the wrappers are translated through your vue-i18n keys when they exist and fall back to English.

import { setIconBase } from '@ziyarago/ui/vue'
setIconBase('/lucide/')   // copy node_modules/lucide-static/icons to public/lucide

Also see Integration (Tailwind 4 layers, CSP) and Migration 0.20 to 0.22.