quasar-native-ui

Native iOS-inspired UI component library for Vue 3 and Quasar — zero external dependencies.

Features

• iOS-native feel — Apple HIG colors, SF Pro typography, UIKit-style press animations
• Zero dependencies — only Vue 3 as a peer dependency; pure HTML, CSS and TypeScript
• Tree-shakeable — import only the components you use
• TypeScript first — full .d.ts declarations with typed props, events and slots
• Quasar ready — boot-file integration in one step
• Accessible — ARIA roles, focus-visible rings, aria-busy, aria-disabled

Table of contents

• Installation
• Quick start
  • Vue 3
  • Quasar
• Components
• Design tokens
• Theming
• Contributing
• Changelog

Installation

npm install quasar-native-ui
# or
yarn add quasar-native-ui
# or
pnpm add quasar-native-ui

Requires: Vue ^3.4.0

Quick start

Vue 3

Register all components globally as a plugin:

// main.ts
import { createApp } from 'vue'
import QuasarNativeUI from 'quasar-native-ui'
import 'quasar-native-ui/styles'
import App from './App.vue'

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

Or import individual components for optimal tree-shaking:

<script setup lang="ts">
import { QnButton } from 'quasar-native-ui'
import 'quasar-native-ui/styles'
</script>

<template>
  <QnButton variant="filled" color="blue">Get started</QnButton>
</template>

Quasar

1. Create a boot file — src/boot/quasar-native-ui.ts:

import { defineBoot } from '#q-app/wrappers'
import QuasarNativeUI from 'quasar-native-ui'
import 'quasar-native-ui/styles'

export default defineBoot(({ app }) => {
  app.use(QuasarNativeUI)
})

2. Register the boot file in quasar.config.ts:

boot: ['quasar-native-ui'],

All Qn* components are now available in every .vue file without additional imports.

Components

| Component | Description | Docs | |---|---|---| | QnButton | iOS-style button with 5 variants, 9 colors, loading state and icon support | docs/components/qn-button.md |

More components are on the roadmap.

Design tokens

All tokens are CSS custom properties defined on .qn-btn (and future components). Override them in your own CSS to customize the library globally:

:root {
  /* System blue — matches Apple HIG */
  --qn-blue: #007AFF;
}

Full token reference: docs/design-tokens.md

Theming

See the theming guide for dark mode, per-component overrides and brand customization.

Contributing

See CONTRIBUTING.md.

Changelog

See CHANGELOG.md.

License

MIT © Alex Rueda