Design System

Foundation

Themes

Color palettes, font families, and type scales, each combinable with light or dark appearance.

useTheme()

Props

Name	Type	Default	Description
`mode`	`'system' \| 'light' \| 'dark'`	—	Readonly ref for the selected appearance mode.
`palette`	`'default' \| 'ocean' \| 'forest' \| 'sunset' \| 'violet' \| 'rose'`	—	Readonly ref for the active color palette.
`font`	`ThemeFont`	—	Readonly ref for the active font family (system, inter, lexend, space-mono, jetbrains-mono, etc.).
`fontSize`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	—	Readonly ref for the active type scale.
`spacing`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	—	Readonly ref for the active spacing scale.
`lineSpacing`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	—	Readonly ref for the active line spacing scale.
`resolved`	`'light' \| 'dark'`	—	Readonly ref for the applied appearance after resolving system preference.

Events

Name	Payload	Description
`setMode(mode)`	`ThemeAppearance`	Sets appearance and persists to localStorage.
`setPalette(palette)`	`ThemePalette`	Sets color palette and persists to localStorage.
`setFont(font)`	`ThemeFont`	Sets font family, loads Google Fonts when needed, and persists to localStorage.
`setFontSize(fontSize)`	`ThemeFontSize`	Sets type scale (xs, sm, md, lg, xl) and persists to localStorage.
`setSpacing(spacing)`	`ThemeSpacing`	Sets spacing scale (xs, sm, md, lg, xl) and persists to localStorage.
`setLineSpacing(lineSpacing)`	`ThemeLineSpacing`	Sets line spacing scale (xs, sm, md, lg, xl) and persists to localStorage.

DsThemeSelect

Slots

Name	Description
`—`	Header dropdowns for appearance, palette, font, size, spacing, and line spacing; no props required.

Palettes

Fonts

Font sizes

Current: light appearance · sunset palette · lexend font · sm size

Example

// Appearance: system | light | dark
const { mode, setMode } = useTheme()
setMode('dark')

// Palette: default | ocean | forest | sunset | violet | rose
const { palette, setPalette } = useTheme()
setPalette('ocean')

// Font: system | inter | lexend | dm-sans | space-mono | jetbrains-mono | ...
const { font, setFont } = useTheme()
setFont('lexend')

// Font size: xs | sm | md | lg | xl
const { fontSize, setFontSize } = useTheme()
setFontSize('lg')

Actions

Button

Primary actions, secondary actions, and destructive flows.

DsButton

Props

Name	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'ghost' \| 'danger'`	`'primary'`	Visual style of the button.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Padding and font size.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Native button type attribute.
`disabled`	`boolean`	`false`	Disables interaction.
`loading`	`boolean`	`false`	Shows a spinner and disables the button.

Events

Name	Payload	Description
`click`	`MouseEvent`	Emitted when the button is clicked.

Slots

Name	Description
`default`	Button label content.

Example

DsButton Primary
DsButton(variant="secondary") Secondary
DsButton(variant="ghost") Ghost
DsButton(variant="danger") Danger
DsButton(loading) Loading

Form Widgets

Input

Text fields with label, hint, and error states.

DsInput

Props

Name	Type	Default	Description
`modelValue`	`string`	`''`	Bound input value (use with v-model).
`label`	`string`	—	Visible field label.
`hint`	`string`	—	Helper text shown below the input.
`error`	`string`	—	Error message; sets invalid state when present.
`type`	`string`	`'text'`	Native input type (text, email, password, etc.).
`placeholder`	`string`	—	Placeholder text.
`disabled`	`boolean`	`false`	Disables the input.
`id`	`string`	—	Custom element id; auto-generated if omitted.

Events

Name	Payload	Description
`update:modelValue`	`string`	Emitted when the input value changes.

We'll never share your email.

Username

Username is already taken.

Example

DsInput(
  v-model="email"
  label="Email"
  placeholder="you@example.com"
  hint="We'll never share your email."
)
DsInput(
  v-model="username"
  label="Username"
  error="Username is already taken."
)

Textarea

Multi-line text input.

DsTextarea

Props

Name	Type	Default	Description
`modelValue`	`string`	`''`	Bound textarea value (use with v-model).
`label`	`string`	—	Visible field label.
`hint`	`string`	—	Helper text shown below the textarea.
`error`	`string`	—	Error message; sets invalid state when present.
`placeholder`	`string`	—	Placeholder text.
`disabled`	`boolean`	`false`	Disables the textarea.
`rows`	`number`	`4`	Visible row count.
`id`	`string`	—	Custom element id; auto-generated if omitted.

Events

Name	Payload	Description
`update:modelValue`	`string`	Emitted when the textarea value changes.

Notes

Example

DsTextarea(
  v-model="notes"
  label="Notes"
  placeholder="Add a note…"
)

Select

Native select with styled options.

DsSelect

Props

Name	Type	Default	Description
`modelValue`	`string`	`''`	Bound selected value (use with v-model).
`label`	`string`	—	Visible field label.
`hint`	`string`	—	Helper text shown below the select.
`error`	`string`	—	Error message; sets invalid state when present.
`placeholder`	`string`	—	Disabled placeholder option text.
`options`required	`SelectOption[]`	—	Array of { label, value } objects.
`disabled`	`boolean`	`false`	Disables the select.
`id`	`string`	—	Custom element id; auto-generated if omitted.

Events

Name	Payload	Description
`update:modelValue`	`string`	Emitted when the selected value changes.

Slots

Name	Description
`value`	Rich trigger content. Slot props: { option: SelectOption \| undefined }. Uses native <select> when omitted.
`option`	Rich list row content. Slot props: { option: SelectOption, selected: boolean }. Uses native <select> when omitted.

Plan

Example

DsSelect(
  v-model="plan"
  label="Plan"
  placeholder="Choose a plan"
  :options="[
    { label: 'Starter', value: 'starter' },
    { label: 'Pro', value: 'pro' },
  ]"
)

Checkbox & Switch

Boolean form controls.

DsCheckbox

Props

Name	Type	Default	Description
`modelValue`	`boolean`	`false`	Checked state (use with v-model).
`label`	`string`	—	Label text beside the checkbox.
`disabled`	`boolean`	`false`	Disables the checkbox.

Events

Name	Payload	Description
`update:modelValue`	`boolean`	Emitted when checked state changes.

Slots

Name	Description
`default`	Alternative to label prop for custom label content.

DsSwitch

Props

Name	Type	Default	Description
`modelValue`	`boolean`	`false`	On/off state (use with v-model).
`label`	`string`	—	Label text beside the switch.
`disabled`	`boolean`	`false`	Disables the switch.

Events

Name	Payload	Description
`update:modelValue`	`boolean`	Emitted when toggle state changes.

Slots

Name	Description
`default`	Alternative to label prop for custom label content.

I agree to the termsEmail notifications

Example

DsCheckbox(v-model="agree" label="I agree to the terms")
DsSwitch(v-model="notifications" label="Email notifications")

DateTime Picker

Configurable date and/or time selection for forms.

DsDateTimePicker

Props

Name	Type	Default	Description
`modelValue`	`string \| null`	`null`	Bound value (use with v-model). Format depends on showDate/showTime: YYYY-MM-DD, HH:mm, or YYYY-MM-DDTHH:mm.
`label`	`string`	—	Visible field label.
`hint`	`string`	—	Helper text shown below the field.
`error`	`string`	—	Error message; sets invalid state when present.
`placeholder`	`string`	—	Placeholder text when no value is set.
`disabled`	`boolean`	`false`	Disables the picker.
`id`	`string`	—	Custom element id; auto-generated if omitted.
`showDate`	`boolean`	`true`	Show the calendar month grid in the panel.
`showTime`	`boolean`	`true`	Show hour/minute (and optional seconds) controls in the panel.
`minDate`	`string`	—	Exclusive minimum date bound as YYYY-MM-DD. Days on or before this date are disabled.
`maxDate`	`string`	—	Exclusive maximum date bound as YYYY-MM-DD. Days on or after this date are disabled.
`minuteStep`	`number`	`5`	Step interval for the minute selector.
`showSeconds`	`boolean`	`false`	Include seconds in time value and selector (only when showTime is true).

Events

Name	Payload	Description
`update:modelValue`	`string \| null`	Emitted when the date and/or time value changes.

Date & time

Appointment

Select a date and time for your booking.

Date only

Booking date

Time only

Reminder time

Example

// Date & time (default)
DsDateTimePicker(
  v-model="appointment"
  label="Appointment"
)

// Date only
DsDateTimePicker(
  v-model="bookingDate"
  label="Booking date"
  :show-time="false"
  min-date="2026-07-01"
  max-date="2026-12-31"
)

// Time only
DsDateTimePicker(
  v-model="reminderTime"
  label="Reminder time"
  :show-date="false"
)

Tag Input

Enter tags as chips for skills, industries, and categories.

DsTagInput

Props

Name	Type	Default	Description
`modelValue`	`string[]`	`[]`	Bound list of tags (use with v-model).
`label`	`string`	—	Visible field label.
`hint`	`string`	—	Helper text shown below the field.
`error`	`string`	—	Error message; sets invalid state when present.
`placeholder`	`string`	`'Type and press Enter'`	Input placeholder.
`disabled`	`boolean`	`false`	Disables the field.
`suggestions`	`string[]`	`[]`	Offered in a dropdown while typing; free text is still accepted.

Events

Name	Payload	Description
`update:modelValue`	`string[]`	Emitted when tags change.

Skills

PR StrategyMessaging

Press Enter to add a tag, or pick one of the suggestions.

Example

DsTagInput(
  v-model="tags"
  :suggestions="SKILL_SUGGESTIONS"
  label="Skills"
  hint="Press Enter to add a tag, or pick one of the suggestions."
)

Image Field

Image upload with a preview of the pending file.

DsImageField

Props

Name	Type	Default	Description
`modelValue`	`File \| null`	`null`	Pending file selection, not yet uploaded (use with v-model).
`src`	`string`	`''`	URL of the stored image, previewed until a file is picked.
`label`	`string`	—	Visible field label.
`hint`	`string`	—	Helper text shown below the field.
`error`	`string`	—	Error message; sets invalid state when present.
`previewAlt`	`string`	`'Preview'`	Alt text / initials fallback name.
`noun`	`string`	`'photo'`	Names the subject in the button labels, e.g. 'Upload cover'.
`accept`	`string`	`IMAGE_ACCEPT`	Accepted MIME types for the file picker.
`disabled`	`boolean`	`false`	Disables the field.

Events

Name	Payload	Description
`update:modelValue`	`File \| null`	Emitted when a file is picked, or null when a pending pick is undone.
`remove`	`—`	Emitted when Remove is pressed with no pending file, meaning the stored image should be dropped.

Photo

JPEG, PNG, WebP or GIF, up to 5 MB.

Example

DsImageField(
  v-model="photo"
  :src="photoUrl"
  label="Photo"
  hint="JPEG, PNG, WebP or GIF, up to 5 MB."
  preview-alt="Profile photo"
  @remove="photoUrl = ''"
)

Inline Edit

Edit-in-place field that inherits the surrounding typography, for editable public pages.

DsInlineEdit

Props

Name	Type	Default	Description
`modelValue`	`string`	`''`	Bound text value (use with v-model).
`multiline`	`boolean`	`false`	Renders an auto-growing textarea instead of a single-line input.
`type`	`string`	`'text'`	Native input type; ignored when multiline.
`placeholder`	`string`	—	Placeholder shown when the value is empty.
`ariaLabel`	`string`	—	Accessible name, since edit-in-place fields have no visible label.
`variant`	`'outline' \| 'underline'`	`'outline'`	Dashed box or a lighter underline treatment.
`error`	`string`	—	Sets the invalid state when present.
`disabled`	`boolean`	`false`	Disables the field.

Events

Name	Payload	Description
`update:modelValue`	`string`	Emitted on every keystroke.

Example

h2
  DsInlineEdit(v-model="headline" aria-label="Headline")

DsInlineEdit(
  v-model="bio"
  multiline
  aria-label="Bio"
  placeholder="Say something about yourself"
)

LinkedIn Input

Username-only field that keeps the stored value a full profile URL, and reduces a pasted link to the username.

DsLinkedInInput

Props

Name	Type	Default	Description
`modelValue`	`string`	`''`	Bound full profile URL (use with v-model); only the username is edited.
`placeholder`	`string`	`'your-name'`	Placeholder shown after the prefix.
`ariaLabel`	`string`	`'LinkedIn username'`	Accessible name for the field.
`error`	`string`	—	Sets the invalid state when present.
`disabled`	`boolean`	`false`	Disables the field.

Events

Name	Payload	Description
`update:modelValue`	`string`	Emitted with the full profile URL, or an empty string when cleared.

Example

DsLinkedInInput(v-model="linkedin")

Repeater

Add, remove, and reorder list items.

DsRepeater

Props

Name	Type	Default	Description
`modelValue`required	`unknown[]`	—	Bound list of items (use with v-model).
`label`	`string`	—	Section label.
`itemLabel`	`string`	`'Item'`	Prefix for each item heading.
`addLabel`	`string`	`'Add item'`	Add button label.
`minItems`	`number`	`0`	Minimum items; remove disabled below this count.
`factory`	`() => unknown`	—	Function returning a new item when Add is clicked.
`disabled`	`boolean`	`false`	Disables add/remove/reorder.

Events

Name	Payload	Description
`update:modelValue`	`unknown[]`	Emitted when items are added, removed, or reordered.

Slots

Name	Description
`default`	Item editor content. Props: item, index.
`header`	Custom header instead of label prop.

Paragraph 1

Paragraph

Paragraph 2

Paragraph

Example

DsRepeater(
  v-model="paragraphs"
  label="About paragraphs"
  item-label="Paragraph"
  add-label="Add paragraph"
  :min-items="1"
  :factory="() => ''"
)
  template(#default="{ item, index }")
    DsTextarea(
      :model-value="String(item)"
      label="Paragraph"
      @update:model-value="paragraphs[index] = $event"
    )

Table

Tabular data display with optional client- or server-side pagination.

DsTable

Props

Name	Type	Default	Description
`columns`	`TableColumn[]`	`[]`	Column definitions with key and label.
`rows`	`Record<string, unknown>[]`	`[]`	Row data objects keyed by column key.
`rowKey`	`string`	—	Property name used as Vue :key for each row.
`paginated`	`boolean`	`false`	Shows pagination controls and pages through rows.
`pageSize`	`number`	`10`	Number of rows shown per page.
`page`	`number`	`1`	Current 1-based page (use with v-model:page).
`totalItems`	`number`	—	Total item count for server-side pagination. When set, rows are treated as the current page and are not sliced client-side.
`maxVisiblePages`	`number`	`5`	Maximum page buttons shown in the pagination control.

Events

Name	Payload	Description
`update:page`	`number`	Emitted when the user selects a different page.

Slots

Name	Description
`default`	Optional custom tbody rows instead of rows prop.
`actions`	Per-row action buttons; adds an Actions column.
`cell-<key>`	Custom cell content for a column key. Props: row, value.

For server-side pagination, bind rows from usePaginatedList and set total-items from the API PaginatedResponse.total.
API field mapping: items → rows, total → totalItems, page_size → pageSize. Query params: page, page_size.

Basic

Name	Role	Status
Alex Kim	Admin	Active
Sam Lee	Editor	Active
Jordan Park	Viewer	Invited

With actions

Name	Role	Status
Alex Kim	Admin	Active
Sam Lee	Editor	Active
Jordan Park	Viewer	Invited

Client-side pagination

Name	Role	Status
Alex Kim	Admin	Active
Sam Lee	Editor	Active
Jordan Park	Viewer	Invited
Riley Chen	Editor	Active
Casey Morgan	Admin	Active

Server-side pagination

Uses usePaginatedList with a mock PaginatedResponse fetcher. API fields map to DsTable as items→rows, total→totalItems, page_size→pageSize.

Name	Role	Status

Example

// Basic
DsTable(:columns="columns" :rows="rows" row-key="id")

// Client-side pagination
DsTable(
  v-model:page="page"
  :columns="columns"
  :rows="rows"
  row-key="id"
  paginated
  :page-size="5"
)

// Server-side pagination with usePaginatedList
const { page, pageSize, rows, totalItems } = usePaginatedList({
  pageSize: 10,
  fetcher: (query) => api.get('things', { query }),
})

DsTable(
  v-model:page="page"
  :columns="columns"
  :rows="rows"
  :total-items="totalItems"
  :page-size="pageSize"
  row-key="id"
  paginated
)

// PaginatedResponse → DsTable mapping:
// items → rows, total → totalItems, page_size → pageSize

Data Display

Calendar

Month view for displaying bookings and appointments.

DsCalendar

Props

Name	Type	Default	Description
`events`	`CalendarEvent[]`	`[]`	Appointments or bookings to display. Each event needs id, start, end, and optional title and status.
`modelValue`	`string`	—	Visible month as YYYY-MM (use with v-model). Defaults to the current month.

Events

Name	Payload	Description
`update:modelValue`	`string`	Emitted when the user navigates to a different month.
`day-click`	`string`	Emitted with YYYY-MM-DD when a day cell is clicked.
`event-click`	`CalendarEvent`	Emitted when an event chip is clicked.

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Example

DsCalendar(
  v-model="month"
  :events="events"
  @day-click="onDayClick"
  @event-click="onEventClick"
)

// CalendarEvent: { id, start, end, title?, status? }

Badge

Status and category labels.

DsBadge

Props

Name	Type	Default	Description
`variant`	`'default' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'default'`	Color tone for the badge.

Slots

Name	Description
`default`	Badge label text.

DefaultPrimarySuccessWarningDangerInfo

Example

DsBadge Default
DsBadge(variant="success") Success
DsBadge(variant="danger") Danger

Card

Content container with header, body, and footer slots.

DsCard

Props

Name	Type	Default	Description
`title`	`string`	—	Card header title when header slot is not used.

Slots

Name	Description
`default`	Main card body content.
`header`	Custom header content; overrides title prop.
`footer`	Footer area, typically for actions.

Your plan renews on April 1, 2026.

Example

DsCard(title="Account overview")
  p Your plan renews on April 1, 2026.
  template(#footer)
    DsButton(size="sm") Manage plan

Avatar

User representation with image or initials.

DsAvatar

Props

Name	Type	Default	Description
`src`	`string`	—	Image URL; shows initials when omitted.
`alt`	`string`	`''`	Alt text for the image.
`name`	`string`	—	Full name used to derive initials.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Avatar dimensions.

Example

DsAvatar(name="Jane Doe" size="md")

Charts & metrics

Stat

Metric summary card for dashboards.

DsStat

Props

Name	Type	Default	Description
`label`required	`string`	—	Metric label.
`value`required	`string`	—	Primary metric value.
`delta`	`string`	—	Optional change indicator.

Revenue

$4,250

+12% this month

Chart line

SVG line chart for time series.

DsChartLine

Props

Name	Type	Default	Description
`points`required	`ChartPoint[]`	—	Series data with label and value.
`title`	`string`	—	Accessible chart title.
`emptyLabel`	`string`	—	Message when there is no data.

Chart bar

SVG bar chart for counts.

DsChartBar

Props

Name	Type	Default	Description
`items`required	`ChartBarItem[]`	—	Bar series with label and value.
`title`	`string`	—	Accessible chart title.

Chart donut

SVG donut for status breakdowns.

DsChartDonut

Props

Name	Type	Default	Description
`segments`required	`ChartDonutSegment[]`	—	Donut segments with label and value.
`title`	`string`	—	Accessible chart title.

Confirmed (12)
Pending (4)
Cancelled (2)

Chart funnel

Narrowing stages for conversion funnels.

DsChartFunnel

Props

Name	Type	Default	Description
`stages`required	`ChartFunnelStage[]`	—	Ordered stages, widest first, with label and value.
`title`	`string`	—	Accessible chart title.
`emptyLabel`	`string`	—	Message shown when there are no stages.

Views1240
Clicks268
21.6% of views
Conversions31
2.5% of views

Chart ranked

Horizontal bars for named top-N breakdowns.

DsChartRanked

Props

Name	Type	Default	Description
`items`required	`ChartRankedItem[]`	—	Rows with label, value, and optional tag and tone.
`title`	`string`	—	Accessible chart title.
`emptyLabel`	`string`	—	Message shown when there are no items.

GoogleHuman238
LinkedInHuman162
ChatGPTAI agent82
GeminiAI agent44

Stepper

Multi-step flow header.

DsStepper

Props

Name	Type	Default	Description
`steps`required	`StepperStep[]`	—	Ordered steps with id and label.
`activeIndex`required	`number`	—	Zero-based active step index.

1Pick a time
2Confirm

Slot picker

Month grid with open booking slots.

DsSlotPicker

Props

Name	Type	Default	Description
`modelValue`	`string \| null`	—	Selected slot ISO datetime (v-model).
`slotsByDay`	`Record<string, string[]>`	—	Open slots keyed by YYYY-MM-DD.

Events

Name	Payload	Description
`update:modelValue`	`string \| null`	Emitted when a slot is selected.

SunMonTueWedThuFriSat

Navigation

Breadcrumb

Hierarchical navigation trail.

DsBreadcrumb

Props

Name	Type	Default	Description
`items`required	`BreadcrumbItem[]`	—	Trail of { label, to? } crumbs; last item is current page.

Example

DsBreadcrumb(:items="[
  { label: 'Home', to: '/' },
  { label: 'Dashboard', to: '/dashboard' },
  { label: 'Settings' },
]")

Sidebar

Dashboard navigation shell.

DsSidebar

Props

Name	Type	Default	Description
`title`	`string`	—	Brand or section title at the top.
`items`	`SidebarItem[]`	—	Nav links as { label, to, icon? } objects.

Slots

Name	Description
`default`	Additional nav links after items prop.

Example

DsSidebar(
  title="Dashboard"
  :items="[
    { label: 'Overview', to: '/dashboard', icon: 'mdi:view-dashboard-outline' },
    { label: 'Settings', to: '/settings', icon: 'mdi:cog-outline' },
  ]"
)

Tabs

Section navigation within a view.

DsTabs

Props

Name	Type	Default	Description
`modelValue`required	`string`	—	Active tab id (use with v-model).
`tabs`required	`TabItem[]`	—	Array of { id, label } tab definitions.

Events

Name	Payload	Description
`update:modelValue`	`string`	Emitted when a different tab is selected.

Slots

Name	Description
`<tab-id>`	Named slot per tab id for panel content.

Overview content for the selected workspace.

Team members and roles.

Billing history and invoices.

Example

DsTabs(v-model="activeTab" :tabs="tabs")
  template(#overview) Overview content
  template(#members) Team members

Pagination

Navigate paged data sets.

DsPagination

Props

Name	Type	Default	Description
`modelValue`required	`number`	—	Current page number (use with v-model).
`totalPages`required	`number`	—	Total number of pages.
`maxVisible`	`number`	`5`	Maximum page buttons shown at once.

Events

Name	Payload	Description
`update:modelValue`	`number`	Emitted when the user selects a different page.

Example

DsPagination(v-model="page" :total-pages="8")

Feedback & Overlays

Alert

Contextual feedback messages.

DsAlert

Props

Name	Type	Default	Description
`variant`	`'info' \| 'success' \| 'warning' \| 'danger'`	`'info'`	Semantic color and icon for the alert.
`title`	`string`	—	Optional bold heading above the message.

Slots

Name	Description
`default`	Alert message body.

Info

Your trial ends in 7 days.

Success

Payment processed successfully.

Warning

API rate limit approaching.

Error

Failed to save changes.

Example

DsAlert(variant="info" title="Info")
  | Your trial ends in 7 days.
DsAlert(variant="success" title="Success")
  | Payment processed successfully.

Toast

Floating notifications for transient feedback.

DsToast

Props

Name	Type	Default	Description
`variant`	`'info' \| 'success' \| 'warning' \| 'danger'`	`'info'`	Semantic color and icon for the toast.
`title`	`string`	—	Optional bold heading above the message.
`message`required	`string`	—	Toast message body.
`duration`	`number`	`5000`	Auto-dismiss delay in ms; 0 keeps the toast until dismissed.

Events

Name	Payload	Description
`dismiss`	—	Emitted when the toast is dismissed (close button or auto-dismiss).

Mount DsToastHost once in app.vue for global toasts.
Use the useToast() composable: show({ message, title?, variant?, duration? }), success(message, title?), error(message, title?).

Example

// Mount DsToastHost once in app.vue, then:
const toast = useToast()

toast.success('Payment processed successfully.')
toast.error('Failed to save changes.')
toast.show({ variant: 'info', title: 'Info', message: 'Your trial ends in 7 days.' })

Modal

Overlay dialog for focused tasks.

DsModal

Props

Name	Type	Default	Description
`open`required	`boolean`	—	Controls visibility (use with v-model:open).
`title`	`string`	—	Dialog title when header slot is not used.
`size`	`'default' \| 'wide'`	`'default'`	Dialog width; wide expands to 40rem when the viewport allows.

Events

Name	Payload	Description
`update:open`	`boolean`	Emitted when the modal should close (backdrop click or close button).

Slots

Name	Description
`default`	Modal body content.
`header`	Custom header; overrides title prop.
`footer-start`	Optional left-aligned footer actions, separated from the main footer cluster.
`footer`	Right-aligned footer actions, typically for primary and cancel buttons.

Example

DsButton(@click="open = true") Open modal
DsModal(v-model:open="open" title="Confirm action")
  p Are you sure?
  template(#footer-start)
    DsButton(variant="danger" @click="open = false") Delete
  template(#footer)
    DsButton(variant="ghost" @click="open = false") Cancel

Tooltip

Supplementary text on hover or focus.

DsTooltip

Props

Name	Type	Default	Description
`text`required	`string`	—	Tooltip content shown on hover or focus.

Slots

Name	Description
`default`	Trigger element that activates the tooltip.

Example

DsTooltip(text="Export as CSV")
  DsButton(variant="secondary") Export

Spinner & Skeleton

Loading placeholders.

DsSpinner

Props

Name	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Spinner dimensions.

DsSkeleton

Props

Name	Type	Default	Description
`variant`	`'text' \| 'rect' \| 'circle'`	`'text'`	Shape of the placeholder.
`width`	`string`	`'100%'`	CSS width value.
`height`	`string`	—	CSS height value; variant provides defaults for text.

Example

DsSpinner
DsSkeleton(variant="text" width="60%")
DsSkeleton(variant="rect" height="4rem")