Getting started

One framework-neutral core, three ways to use it: Vue 3, Nuxt and React. Same component names, same props.

1. Install

npm i @ziyarago/ui

Vue 3.5+ or React 18+ is a peer dependency. Install the one you use. Node 18+ for tooling.

2. Set up

import { createApp } from 'vue'
import '@ziyarago/ui/style.css'
import ui from '@ziyarago/ui/vue'
import App from './App.vue'

createApp(App).use(ui).mount('#app')

// or import only what you use
// import { UiButton, UiCard } from '@ziyarago/ui/vue'

3. Theme and direction

import { useUiTheme } from '@ziyarago/ui/theme'

const ui = useUiTheme()
ui.setTheme('light')      // dark | light
ui.setPalette('tamam')    // gold | tamam
ui.setLocale('ar')        // dir="rtl" and the Arabic font

The theme is stored in localStorage and written to <html> as data-theme, data-palette and dir. It is safe to call on the server.

Conventions

• Controlled inputs: Vue v-model; React modelValue and onChange(value).
• Slots: Vue named slots (#actions); React props with the same name (actions).
• Icons are Lucide names (icon="search"). They load from the network by default; self-host with setIconBase('/icons/').
• CSS classes zg-* and variables --zg-* are public API.