Guide

Getting started

Add the components you need as editable Vue source. This guide uses Button in a Vue 3.5+ project with Tailwind CSS 4.

1. Get the component files

Download the Button source, shared control types, and theme files. Each registry file contains a files list. Save each entry's content at its target path in your project. Decode entries marked base64 before saving them, including the bundled font files. Keep the font license alongside the fonts.

For another component, open /registry/<name>.json and include the items named in its registryDependencies. An installer and npm package are not available yet; the registry provides the source and dependency list directly.

2. Add the theme

Install Tailwind CSS 4 and its Vite plugin, then import the copied theme after Tailwind.

vite.config.ts

import tailwindcss from '@tailwindcss/vite'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({ plugins: [vue(), tailwindcss()] })

app.css

@import 'tailwindcss';
@import './assets/weini-nebula-font.css';
@import './assets/weini-theme.css';
@source './components/ui';

3. Use a component

Example.vue

<script setup lang="ts">
import Button from './components/ui/button/Button.vue'
</script>

<template>
  <Button>Save changes</Button>
</template>

Use the paths where you saved the files. Vue 3.5+ is the only component runtime dependency.