Installation

Tile UI Vue can be consumed as packages or as copy-paste registry items distributed from the Vue site.

What to choose

• Use the package when you want the quickest setup for a Nuxt or Vue app already aligned to the Tile UI runtime.
• Use the registry when you want to own the component source inside your app and customize implementation details directly.

Package install

pnpm add @tile-ui/vue @tile-ui/styles @tile-ui/core

Theme setup

Tile components use shadcn-compatible semantic CSS variables. If the application already has a shadcn theme, import only Tile’s extension tokens once:

import '@tile-ui/styles/scss/tokens.scss';

In Nuxt, add the tokens alongside your existing global stylesheet. Keep your existing theme and reset.

export default defineNuxtConfig({
	css: ['@tile-ui/styles/scss/tokens.scss', '~/assets/css/main.css'],
});

If the application does not already define semantic variables, load theme.scss for Tile’s optional default light and dark palette. Add reset.scss only when the application also needs Tile’s reset:

export default defineNuxtConfig({
	css: ['@tile-ui/styles/scss/theme.scss', '@tile-ui/styles/scss/reset.scss'],
});

See Theming for entry-point details, dark mode, scoped themes, and portal behavior.

Package usage

import { Button, Input } from '@tile-ui/vue';
 
export default defineComponent({
	setup() {
		return () => (
			<form class="form-group">
				<Input label="Project name" helperText="Shown in the dashboard and generated URLs." />
				<Button type="submit">Create project</Button>
			</form>
		);
	},
});

Registry install

Use the registry when you want to pull source files into your project rather than consume the published package.

First, register the Tile UI namespace in components.json so shadcn can resolve shared registry dependencies without hardcoding the docs domain into each item:

{
	"registries": {
		"@tile-ui": "https://vue.tileui.zmorg.cn/r/{name}.json"
	}
}

pnpm dlx shadcn@latest add @tile-ui/button
pnpm dlx shadcn@latest add @tile-ui/card

The CLI resolves shared items such as @tile-ui/core, @tile-ui/utils, and @tile-ui/styles automatically. The styles dependency copies the required Sass files and injects only Tile’s --tile-* extension variables into the global stylesheet configured by components.json; the semantic palette still comes from your host theme.

If the application does not already provide shadcn-compatible semantic variables, install Tile’s optional default palette explicitly:

pnpm dlx shadcn@latest add @tile-ui/theme-default

Registry output

Registry items currently write files into a structure like this:

components/ui/*
composables/*
styles/*

That keeps Vue components, composables, and shared SCSS assets colocated in a way that works well for Nuxt projects.

Next steps

1. Review Components for the core primitives.
2. Configure Theming for package installs or custom themes.
3. Review Composables for app-level helpers.
4. Review Registry if you plan to copy source into your project.