Vue, Nuxt & React UI components and patterns
A glass design system for Umrah and Hajj products. One framework-neutral core, adapters for each framework, 182 components, 16 page templates.
terminal
npm i @ziyarago/ui
Buttons
Form
Feedback
SavedYour changes are live.
Upload68%
Navigation
SAOnlineAdmin
Bookings1 248
Inputs
Same code for Vue, Nuxt and React
Same component names and props. Vue uses v-model and named slots; React uses modelValue, onChange and slot props.
Vue
<script setup>
import { UiCard, UiButton } from '@ziyarago/ui/vue'
</script>
<template>
<UiCard title="Umrah package" subtitle="7 nights">
<UiButton variant="primary">Book now</UiButton>
</UiCard>
</template>Customize all the way
Use the controls in the header: dark and light, two palettes, LTR and RTL. Everything on this page follows.
182 components
Actions, forms, data, feedback, overlays, navigation, plus Umrah, hotel and CRM blocks.
16 page templates
Dashboard, CRM, bookings, catalog, settings, auth and more. Fill named slots only.
RTL and Arabic
Direction flips with one attribute. Thmanyah ships in the package.
Tokens for any client
OKLCH CSS variables and tokens.json for Flutter and native apps.