Components

Every component's full reference lives in the design-system documentation: one page per component with a Vue tab, live examples, and tables of its props, parts, slots and events. This page lists them with the subpath each one is exported from, and covers what is specific to Vue.

Importing

Every component is a named export of the package root and of one category subpath:

import { Button, Dialog } from '@artisanpack-ui/vue';
// or
import { Button } from '@artisanpack-ui/vue/form';
import { Dialog } from '@artisanpack-ui/vue/layout';

The subpaths are /form, /layout, /navigation, /display, /data, /feedback, /utility, /composables and /ai. The AI components are only exported from /ai. Each subpath ships its own type declarations.

v-model

Form components bind their value with v-model. Checkbox and Toggle bind checked, and components with an open state bind open:

<script setup lang="ts">
import { ref } from 'vue';
import { Button, Dialog, Input, Toggle } from '@artisanpack-ui/vue';

const name = ref('');
const notify = ref(true);
const editing = ref(false);
</script>

<template>
  <Button @click="editing = true">Edit profile</Button>

  <Dialog v-model:open="editing" title="Edit profile">
    <Input v-model="name" label="Name" name="name" />
    <Toggle v-model:checked="notify" label="Email me about replies" />
  </Dialog>
</template>

A component bound with v-model:open follows the value you pass. It reports a change through update:open and waits for the value to change, so a parent that ignores the event keeps it where it is. Without the binding, it keeps its own state. The component pages list each component's events under the Vue tab.

class and classes

class, style and other attributes fall through to the component. class lands on its root part (for overlays, the panel). On form fields, attributes such as name, required and autocomplete go to the native control. Combobox is the exception: its attributes land on its root, so an aria-label or autocomplete doesn't reach the input. Give it an accessible name with the label prop, and use its name prop to name the hidden inputs it submits.

To style any other part, pass classes, keyed by part name:

<Button
  color="primary"
  :classes="{ label: 'tracking-wide', icon: 'opacity-75' }"
  leading-icon="plus"
>
  New listing
</Button>

The part names are listed on each component's page and exported as types (ButtonPart, DialogPart, …). See Component Markup.

Slots

Text props such as title, description and footer have a slot of the same name for richer content, and icon props have an icon slot (iconEnd for a trailing icon):

<Card title="Revenue">
  <template #actions>
    <Button size="sm" variant="ghost">Export</Button>
  </template>
  …
</Card>

Each component page lists its slots.

Icons

Icon props (leadingIcon, icon, …) take names from the shared icon registry. registerIcons, registerDirectionalIcons, isSafeIconBody and UnsafeIconError are re-exported from the package root, so you can add your own:

import { registerIcons } from '@artisanpack-ui/vue';

registerIcons({
  'brand-logo': '<path d="M4 4h16v16H4z"/><circle cx="12" cy="12" r="4"/>',
});

Toasts

Put one Toaster on the page, then call toast.create() from anywhere:

<script setup lang="ts">
import { Button, Toaster, toast } from '@artisanpack-ui/vue';
</script>

<template>
  <Button @click="toast.create({ title: 'Listing saved', color: 'success' })">Save</Button>
  <Toaster />
</template>

Global registration

Components can be registered globally with the Vue plugin, under a prefix (<ApButton>). Only the components you pass are registered.

All components

Actions

Forms

Editors and content

Data display

Feedback

Overlays

Navigation

Disclosure

Layout

Media

Theme

Livewire-only components

StreamableContent, ImageLibrary and ThemePreview are Livewire-only: the design system ships them in Livewire UI Components, not in React or Vue.

Deprecated exports

These 1.x names still work in 2.0 so an app keeps building while you migrate. Each is a thin alias: it renders its replacement, maps the 1.x props it can, and warns once in development. They're marked @deprecated and will be removed in the next major. Every attribute an alias doesn't map, including the replacement's own props, passes through to the replacement.

A few behaviours change:

• Sidebar has no mobile drawer or end-side sidebar: it sits at the start edge and stacks above the content on narrow screens.
• ToastProvider has its own toaster, so useToast() below it never reaches the page's toast. Toasts past max now queue instead of evicting the oldest.
• FileUpload takes File's API, not its 1.x one: the filesSelected event and the withDragDrop, dragDropText, dragDropClass, progress and hideProgress props are gone. Keeping the import isn't enough. Bind v-model to receive the selected files, and pass progress per file in the entries.

The codemod rewrites most of them for you.