Shared system. Progressive runtime.
Start simple. Grow without rewrites.
Vue-native components, reactive composables, and installable source that fit naturally into templates, JSX, and applications of every size.
<script setup> const saved = ref(false)</script><template> <Button @click="saved = true"> {{ saved ? 'Saved' : 'Save' }} </Button></template>State changes. The template follows.
Installation
Use the Vue package or install items from the Vue registry.
→02Registry
Browse the Vue registry URLs and item inventory.
→03Components
Read component notes for Button, Input, Textarea, Label, and Card.
→04Composables
Vue-native helpers for clipboard, storage, and media-query workflows.
→05Examples
See complete example compositions built from the same primitives.
→Rendered from the source
See it, it’s yours.
Explore the component and its code.
Ship a Vue workspace
Configure your next registry-powered release.
<script setup lang="ts">import { ref } from 'vue';import { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input } from '@tile-ui/vue';import { Switch } from '@tile-ui/vue';import { Progress } from '@tile-ui/vue'; type ShowcasePhase = 'idle' | 'adding' | 'removing'; const { stage, phase } = defineProps<{ stage: number; phase: ShowcasePhase }>();const project = ref('vue-studio');const preview = ref(true);const progress = ref(68);</script> <template> <Card class="framework-showcase-card"> <CardHeader> <div class="framework-showcase-card__title"> <div> <CardTitle>Ship a Vue workspace</CardTitle> <CardDescription class="framework-showcase-card__description">Configure your next registry-powered release.</CardDescription> </div> <Badge variant="secondary">Ready</Badge> </div> </CardHeader> <CardContent class="framework-showcase-card__content"> <Input :model-value="project" label="Project name" :helper-text="`tile.dev/${project || 'workspace'}`" @update:model-value="project = $event" /> <div class="framework-showcase-card__row framework-showcase-card__stage" :data-visible="stage >= 1" :data-active="stage === 1 ? phase : 'idle'"> <div><strong>Preview deployments</strong><span>Build every branch with Nuxt.</span></div> <Switch :model-value="preview" aria-label="Enable preview deployments" @update:model-value="preview = $event" /> </div> <div class="framework-showcase-card__progress framework-showcase-card__stage" :data-visible="stage >= 2" :data-active="stage === 2 ? phase : 'idle'"> <div> <strong>Registry sync</strong><span>{{ progress }}%</span> </div> <Progress :value="progress" aria-label="Registry sync progress" /> </div> </CardContent> <CardFooter class="framework-showcase-card__footer"> <Button class="framework-showcase-card__stage" :data-visible="stage >= 3" :data-active="stage === 3 ? phase : 'idle'" variant="outline" @click="progress = 0" >Reset</Button > <Button>Deploy workspace</Button> </CardFooter> </Card></template> Drag to compare · Use arrow keys when the divider is focused
Built for the Vue ecosystem
Progressive from component to application.
- Vue-native bindingReactive models and events fit directly into existing Vue flows.
- Composables includedShare browser behavior without coupling it to component markup.
- Nuxt readyComponents work across client rendering and server-rendered Vue apps.
One system, every runtime
Your framework, your components.
Tile UI carries the same design language and source-owned workflow across frameworks, without flattening their native patterns.