Vue 3 UI components and styles for MEGA experiences.
@tensorplay/mega-ui is a Vue 3 component library for building clear, consistent MEGA interfaces. It pairs reusable controls, form fields, dialogs, status views, settings components, and a shared visual language in one installable package.
npm install @tensorplay/mega-uiThe package expects Vue, Vue Router, and Pinia to be available in the host application.
Import the styles once in your application entry point, then import the components you need.
<script setup lang="ts">
import { UiButton, UiTextField } from "@tensorplay/mega-ui";
import "@tensorplay/mega-ui/styles.css";
</script>
<template>
<form>
<UiTextField label="Email" type="email" />
<UiButton type="submit">Continue</UiButton>
</form>
</template>Import named components from the package root and use the shared stylesheet once per application. The library is designed for composition: start with a small control such as UiButton or UiTextField, then combine dialogs, menus, directory views, and settings views as your interface grows.
- Buttons, icons, avatars, badges, alerts, loading states, and toasts
- Text, number, select, range, checkbox, radio, and search controls
- Dialogs, menus, pagination, filter controls, and file dropzones
- Copy-safe long values and selectable, copyable code blocks
- Directory, settings, account, and status views
- Catalog sections, resource cards, and split
owner/namerepository links - Markdown rendering and editing helpers
Components are individually exported from the package root, so applications can import only what they use.
| Export | Use it for |
|---|---|
@tensorplay/mega-ui |
Vue components, helpers, and types |
@tensorplay/mega-ui/styles.css |
The shared MEGA stylesheet |
@tensorplay/mega-ui/ai-icons/* |
AI application artwork |
The package also exposes AI application artwork through @tensorplay/mega-ui/ai-icons/*. Use these paths when integrating components such as OAuthApplicationLogo or when rendering a supported application icon yourself.