Quick Start

Import the Library

First, import the library and its style, then use it as a plugin in your Vue app:

import SproutDesignSystem from 'design-system-next'; 

import 'design-system-next/style.css'; // import the library's style
import App from './App.vue';

const app = createApp(App);

app.use(SproutDesignSystem); // Register the design system plugin
app.mount('#app');

Default Component Prefix

By default, all components are prefixed with spr-. For example, a button component would be used as <spr-button />.

Usage Options

There are two ways to use components from the Design System:

1. Global Registration (Recommended for most apps)

After using app.use(SproutDesignSystem), all components are automatically available globally with the spr- prefix:

<template>
  <spr-button>Click me</spr-button>
  <spr-input v-model="value" />
</template>

2. Tree-Shakable Imports (For optimized bundles)

Import only the components you need to reduce bundle size:

import { Button, Input } from 'design-system-next';

<template>
  <Button>Click me</Button>
  <Input v-model="value" />
</template>

<script setup>
import { Button, Input } from 'design-system-next';
import { ref } from 'vue';

const value = ref('');
</script>

TypeScript Support: You can also import TypeScript types for components:

import { Button, ButtonPropTypes, ButtonEmitTypes } from 'design-system-next';
import type { InputPropTypes, AvatarPropTypes } from 'design-system-next';

TIP

Use tree-shakable imports when bundle size is critical, or global registration for convenience.