@codemonster-ru/vueforge

v0.72.0

Published

5 hours ago

Open source UI components for Vue.js.

0High
0Medium
0Low

kolesnikov_k_a

vue vue3 ui components component-library ui-kit design-system theming typescript vite

VueForge

Open source component-level UI library for Vue.js.

Install

npm i @codemonster-ru/vueforge

Peer dependencies:

vue (v3)
vue-router (v4)
@codemonster-ru/vueiconify

Usage

import { createApp } from 'vue';
import {
    VueForge,
    DefaultTheme,
    Button,
    ButtonGroup,
    Input,
    InputGroup,
    InputAddon,
    InlineEdit,
    SearchInput,
    MentionInput,
    PasswordInput,
    OtpInput,
    ColorPicker,
    MaskedInput,
    NumberInput,
    Form,
    FormField,
    Textarea,
    RichTextEditor,
    FileUpload,
    Breadcrumbs,
    Divider,
    PageHeader,
    Select,
    Autocomplete,
    Combobox,
    MultiSelect,
    TagInput,
    DatePicker,
    Calendar,
    DateRangePicker,
    TimePicker,
    DateTimePicker,
    Pagination,
    DataTable,
    Checkbox,
    Switch,
    SegmentedControl,
    Alert,
    EmptyState,
    Skeleton,
    Progress,
    Spinner,
    Badge,
    Chip,
    FilterChips,
    Accordion,
    AccordionItem,
    Slider,
    Splitter,
    SplitterPanel,
    Stepper,
    Wizard,
    WizardStep,
    Timeline,
    Rating,
    Tree,
    TreeSelect,
    VirtualScroller,
    Drawer,
    ConfirmDialog,
    Dropdown,
    SplitButton,
    ContextMenu,
    CommandPalette,
    NotificationCenter,
    AppShell,
    KanbanBoard,
    Tour,
} from '@codemonster-ru/vueforge';
import '@codemonster-ru/vueforge/dist/index.css';

const app = createApp(App);

app.use(VueForge, {
    theme: {
        preset: DefaultTheme,
    },
});

<Button label="Hello" severity="primary" />
<ButtonGroup attached variant="outlined" size="small">
    <Button label="Day" />
    <Button label="Week" />
    <Button label="Month" />
</ButtonGroup>
<Form v-model="formValues" :validate="validateForm" @submit="onSubmit">
    <template #default="{ values, errors, touched, setFieldValue, setFieldTouched }">
        <FormField label="Email" :error="touched.email ? errors.email : ''">
            <template #default>
                <Input
                    :model-value="String(values.email ?? '')"
                    @update:model-value="value => setFieldValue('email', value)"
                    @blur="() => setFieldTouched('email', true)"
                />
            </template>
        </FormField>
        <Button type="submit" label="Submit" />
    </template>
</Form>
<FormField label="Name" hint="Required field">
    <Input v-model="name" placeholder="Your name" />
</FormField>
<InputGroup>
    <InputAddon>$</InputAddon>
    <NumberInput v-model="price" :min="0" :step="0.5" />
    <InputAddon>.00</InputAddon>
</InputGroup>
<InlineEdit v-model="name" placeholder="No name" />
<SearchInput v-model="query" placeholder="Search components" clearable />
<MentionInput v-model="message" :suggestions="mentionSuggestions" placeholder="Type @name" />
<PasswordInput v-model="password" placeholder="Enter password" show-strength />
<OtpInput v-model="otp" :length="6" />
<ColorPicker v-model="brandColor" :presets="['#2b6cb0', '#0cbc87', '#d6293e']" />
<MaskedInput v-model="phone" mask="+7 (###) ###-##-##" />
<NumberInput v-model="age" :min="0" :max="120" :step="1" />
<Textarea v-model="bio" placeholder="Tell us about yourself" />
<RichTextEditor v-model="article" />
<FileUpload v-model="resume" accept=".pdf,.doc,.docx" />
<Breadcrumbs :items="breadcrumbItems" />
<Divider label="OR" />
<PageHeader title="Projects" subtitle="Manage active projects and team workload.">
    <template #actions>
        <Button label="Import" variant="outlined" severity="secondary" />
        <Button label="New project" icon="plus" />
    </template>
</PageHeader>
<Select v-model="role" :options="roles" placeholder="Choose role" />
<Autocomplete v-model="country" :options="countries" placeholder="Find country" />
<Combobox v-model="countryId" :options="countries" placeholder="Pick country" clearable />
<MultiSelect v-model="countries" :options="countryOptions" placeholder="Select countries" clearable />
<TagInput v-model="skills" :options="skillOptions" placeholder="Add skills" clearable />
<DatePicker v-model="birthday" placeholder="Pick birthday" />
<Calendar v-model="selectedDate" />
<DateRangePicker v-model="range" placeholder="Pick range" />
<TimePicker v-model="meetingTime" placeholder="Pick time" />
<DateTimePicker v-model="meetingAt" placeholder="Pick date and time" />
<Pagination v-model="page" :total-items="240" :page-size="20" />
<DataTable :columns="columns" :rows="rows" sortable striped />
<Checkbox v-model="agreed" label="I agree" />
<Switch v-model="darkMode" label="Dark mode" />
<SegmentedControl
    v-model="view"
    :options="[
        { label: 'List', value: 'list' },
        { label: 'Grid', value: 'grid' },
    ]"
/>
<Alert severity="info" title="Heads up" message="Project settings were updated." />
<EmptyState title="No projects yet" description="Create your first project to get started." icon="📂" />
<Skeleton height="12px" width="140px" />
<Progress :value="64" />
<Spinner label="Loading..." />
<Badge label="Beta" />
<Chip label="New" />
<FilterChips
    v-model="filters"
    :options="[
        { label: 'Open', value: 'open' },
        { label: 'Done', value: 'done' },
    ]"
    clearable
/>
<Slider v-model="volume" :min="0" :max="100" :step="5" show-value />
<Splitter v-model="splitSizes" style="height: 280px">
    <SplitterPanel :min-size="20">Left panel</SplitterPanel>
    <SplitterPanel :min-size="20">Right panel</SplitterPanel>
</Splitter>
<Stepper v-model="step" :steps="steps" clickable />
<Wizard v-model="wizardStep" :steps="wizardSteps">
    <WizardStep value="account">Account step</WizardStep>
    <WizardStep value="confirm">Confirm step</WizardStep>
</Wizard>
<Timeline :items="timelineItems" />
<Rating v-model="rating" allow-half />
<Tree v-model="selectedNode" v-model:expandedKeys="expandedKeys" :items="treeItems" />
<TreeSelect v-model="selectedNode" v-model:expandedKeys="expandedKeys" :items="treeItems" placeholder="Select node" />
<VirtualScroller :items="largeItems" :item-height="40" height="320px">
    <template #default="{ item, index }">
        {{ index + 1 }}. {{ item.label }}
    </template>
</VirtualScroller>
<Accordion v-model="faq">
    <AccordionItem value="shipping" title="Shipping">
        Shipping details
    </AccordionItem>
    <AccordionItem value="returns" title="Returns">
        Returns policy
    </AccordionItem>
</Accordion>
<Drawer v-model="drawerOpen" title="Filters" position="right">
    <template #body>
        Drawer content
    </template>
</Drawer>
<ConfirmDialog
    v-model="confirmOpen"
    title="Delete item?"
    message="This action cannot be undone."
    confirm-label="Delete"
    @confirm="removeItem"
/>
<Dropdown :items="menuItems">
    <template #trigger>
        <Button label="Actions" />
    </template>
</Dropdown>
<SplitButton
    label="Save"
    :items="[
        { label: 'Save draft', command: saveDraft },
        { label: 'Save and publish', command: publish },
    ]"
    @click="save"
/>
<ContextMenu :items="menuItems">
    <div>Right-click here</div>
</ContextMenu>
<CommandPalette
    v-model="commandPaletteOpen"
    :items="[
        { label: 'Open docs', value: 'docs', group: 'Navigation' },
        { label: 'Save as draft', value: 'draft', group: 'Actions' },
    ]"
/>
<NotificationCenter v-model="notificationsOpen" v-model:items="notificationsItems" />
<AppShell v-model="sidebarCollapsed">
    <template #sidebar>Sidebar content</template>
    <template #header>Header content</template>
    <div>Main content</div>
</AppShell>
<KanbanBoard v-model:items="kanbanItems" :columns="kanbanColumns" />
<Tour v-model="tourOpen" :steps="tourSteps" />

Components

Button
ButtonGroup
Card
Checkbox
RadioGroup
RadioButton
SegmentedControl
Tabs
Tab
TabPanel
Accordion
AccordionItem
Toast
ToastContainer
Alert
EmptyState
Input
InputGroup
InputAddon
InlineEdit
SearchInput
MentionInput
PasswordInput
OtpInput
ColorPicker
MaskedInput
NumberInput
Form
FormField
Textarea
RichTextEditor
FileUpload
Link
Breadcrumbs
Divider
PageHeader
Menu
Modal
ConfirmDialog
Drawer
Dropdown
SplitButton
ContextMenu
CommandPalette
NotificationCenter
AppShell
KanbanBoard
Tour
Popover
Select
Autocomplete
Combobox
MultiSelect
TagInput
DatePicker
Calendar
DateRangePicker
TimePicker
DateTimePicker
Pagination
DataTable
Switch
Tooltip
Skeleton
Progress
Spinner
Badge
Chip
FilterChips
Avatar
Slider
Splitter
SplitterPanel
Stepper
Wizard
WizardStep
Timeline
Rating
Tree
TreeSelect
VirtualScroller

Input / InputGroup / Search / Password / Textarea (quick API):

Input: single-line control, supports v-model, size, variant, disabled, readonly.
ButtonGroup: grouped button actions with shared size/variant/severity and attached/stacked layouts.
InputGroup: horizontal control combiner for field/addon/button layouts with unified corners and borders.
EmptyState: reusable empty-data block with icon/title/description/actions for table/list/search blank states.
InlineEdit: inline value editing with view/edit states, save/cancel actions, and text/number modes.
SearchInput: search-focused control with debounce, clearable, loading, size, and variant.
MentionInput: text input with @/# triggers, suggestions panel, keyboard selection, and mention insertion events.
PasswordInput: password control, supports visibility toggle, strength meter, CapsLock hint, size, and variant.
OtpInput: one-time code control, supports fixed length, paste handling, numeric/alphanumeric modes, size, and variant.
ColorPicker: color control with presets, optional alpha channel, and output formats (hex/rgb/hsl).
MaskedInput: formatted input control with string/function masks and optional raw output (unmask).
NumberInput: numeric control, supports v-model, min, max, step, precision, controls, size, variant.
Splitter: resizable multi-panel container with draggable separators and v-model percentage sizes.
Tour: guided step-by-step onboarding overlay anchored to target elements.
NotificationCenter: persistent notifications inbox with read/unread state and bulk actions.
AppShell: application layout shell with sidebar/header/main/footer regions, collapse toggle, and mobile drawer behavior.
KanbanBoard: task board with draggable cards, customizable column/card slots, and move events.
RichTextEditor: formatting editor with toolbar actions and Markdown/HTML output.
Divider: horizontal/vertical visual separator with optional label and style variants.
Spinner: lightweight loading indicator with inline/overlay variants and severity colors.
PageHeader: page-level heading block with breadcrumbs/meta/actions slots for dashboard screens.
Wizard: multi-step flow container with linear navigation, per-step validation, and completion events.
Textarea: multi-line control, same as Input plus rows.
TagInput: token/tag control, supports v-model (array), suggestions, custom tags, maxTags, clearable, size, variant.
FilterChips: compact chip-based filter toggles with single/multiple selection modes and optional clear action.
SearchInput, MentionInput, InlineEdit, OtpInput, ColorPicker, MaskedInput, RichTextEditor, Checkbox, Select, Autocomplete, MultiSelect, TagInput, DatePicker, Calendar, DateRangePicker, DateTimePicker, Pagination, DataTable, SegmentedControl, and TreeSelect also support variant: 'filled' | 'outlined'.

Form

Props:

modelValue?: Record<string, unknown> (v-model)
initialValues?: Record<string, unknown>
validate?: (values) => Record<string, string> | string | boolean | null | Promise<...>
validateOn?: 'submit' | 'input' | 'change' | 'blur' | Array<'submit' | 'input' | 'change' | 'blur'> (default submit)
disabled?: boolean
novalidate?: boolean (default true)
id?: string
ariaLabel?: string
ariaLabelledby?: string

Events:

update:modelValue
change
blur
validate
submit
invalidSubmit
reset

Slots:

default - form helpers: { values, errors, touched, isValid, isDirty, isSubmitting, setFieldValue, setFieldTouched, setFieldError, validate, submit, reset }

Example:

<Form v-model="values" :validate="validateForm" validate-on="blur" @submit="send">
    <template #default="{ values, errors, touched, setFieldValue, setFieldTouched }">
        <FormField label="Email" :error="touched.email ? errors.email : ''">
            <template #default>
                <Input
                    :model-value="String(values.email ?? '')"
                    @update:model-value="value => setFieldValue('email', value)"
                    @blur="() => setFieldTouched('email', true)"
                />
            </template>
        </FormField>
        <Button type="submit" label="Send" />
    </template>
</Form>

Form tokens

Component tokens (override via theme.overrides.components.form):

gap, textColor, disabledOpacity

FormField

Props:

id?: string (used in label for and slot props)
label?: string
hint?: string
error?: string
required?: boolean
disabled?: boolean
size?: 'small' | 'normal' | 'large' (default normal)

Slots:

default - form control wrapper slot props: { id, describedBy, invalid, required }
label (optional)
hint (optional)
error (optional)

Example:

<FormField label="Email" hint="We never share it" :error="emailError">
    <template #default="{ id, describedBy }">
        <Input :id="id" v-model="email" :aria-describedby="describedBy" placeholder="[email protected]" />
    </template>
</FormField>

When error is set, FormField applies invalid-state border highlighting to nested form controls. Customize these colors via theme.overrides.components.formField.errorBorderColor and errorFocusBorderColor.

InputGroup / InputAddon

Props (InputGroup):

size?: 'small' | 'normal' | 'large' (default normal)
variant?: 'filled' | 'outlined' (default filled)
disabled?: boolean (default false)

Props (InputAddon):

as?: string (default span)

Slots:

default - group controls/addons content

Example:

<InputGroup>
    <InputAddon>$</InputAddon>
    <NumberInput v-model="price" :min="0" :step="0.5" />
    <Button label="Apply" />
</InputGroup>

InputGroup tokens

Component tokens (override via theme.overrides.components.inputGroup):

gap, borderRadius
addonPadding, addonFontSize
addonBackgroundColor, addonOutlinedBackgroundColor
addonTextColor, addonBorderColor, disabledOpacity
small.addonPadding, small.addonFontSize
large.addonPadding, large.addonFontSize

InlineEdit

Props:

modelValue?: string | number | null (v-model)
type?: 'text' | 'number' (default text)
placeholder?: string
disabled?: boolean
readonly?: boolean
size?: 'small' | 'normal' | 'large' (default normal)
variant?: 'filled' | 'outlined' (default filled)
editLabel?: string (default Edit)
saveLabel?: string (default Save)
cancelLabel?: string (default Cancel)

Events:

update:modelValue
save
cancel
start
end
focus
blur

Example:

<InlineEdit v-model="projectName" placeholder="No project name" />
<InlineEdit v-model="budget" type="number" variant="outlined" />

InlineEdit tokens

Component tokens (override via theme.overrides.components.inlineEdit):

gap, fontSize, padding
borderRadius, borderColor
backgroundColor, textColor, placeholderColor
focusBorderColor, focusRingShadow, hoverBorderColor, disabledOpacity
actionsGap
buttonPadding, buttonRadius, buttonBorderColor
buttonBackgroundColor, buttonTextColor, buttonHoverBackgroundColor
cancelButtonBackgroundColor, cancelButtonTextColor, cancelButtonBorderColor
small.fontSize, small.padding, small.buttonPadding
large.fontSize, large.padding, large.buttonPadding

MentionInput

Props:

modelValue?: string (v-model)
suggestions?: Array<{ label: string; value?: string | number; trigger?: string; disabled?: boolean }> (default [])
triggers?: Array<string> (default ['@', '#'])
placeholder?: string
disabled?: boolean
readonly?: boolean
loading?: boolean (default false)
loadingText?: string (default Loading...)
emptyText?: string (default No matches)
minQueryLength?: number (default 1)
maxSuggestions?: number (default 8)
appendSpace?: boolean (default true)
size?: 'small' | 'normal' | 'large' (default normal)
variant?: 'filled' | 'outlined' (default filled)
ariaLabel?: string

Events:

update:modelValue
input
change
search (payload: { trigger: string; query: string })
select
insert (payload: { trigger, query, option, text, range })
focus
blur

Example:

<MentionInput
    v-model="message"
    :suggestions="[
        { label: 'alice', value: 'alice', trigger: '@' },
        { label: 'frontend', value: 'frontend', trigger: '#' },
    ]"
    placeholder="Type @name or #topic"
/>

MentionInput tokens

Component tokens (override via theme.overrides.components.mentionInput):

minWidth, fontSize, padding
borderRadius, borderColor
backgroundColor, textColor, placeholderColor
focusBorderColor, focusRingShadow, hoverBorderColor, disabledOpacity
panelBackgroundColor, panelBorderColor, panelPadding, panelMaxHeight, panelRadiusOffset, panelShadow
optionPadding, optionGap, optionBorderRadius, optionFontSize
optionHoverBackgroundColor, optionTriggerColor
emptyPadding, emptyColor
small.fontSize, small.padding
large.fontSize, large.padding

Note: default filled backgrounds for Input/Select/Textarea use controls.backgroundColor (defaults to bgSoftColor). Set it to bgColor to disable soft backgrounds.

Autocomplete

Props:

modelValue?: string | number (v-model)
options?: Array<{ label: string; value: string | number; disabled?: boolean }>
optionLabel?: string (default label)
optionValue?: string (default value)
placeholder?: string
disabled?: boolean
readonly?: boolean
loading?: boolean
loadingText?: string (default Loading...)
emptyText?: string (default No results)
filter?: boolean (default true)
size?: 'small' | 'normal' | 'large' (default normal)
variant?: 'filled' | 'outlined' (default filled)

Events:

update:modelValue
change
search
focus
blur

Example:

<Autocomplete v-model="country" :options="countries" placeholder="Find country" />

Combobox

Props:

modelValue?: string | number (v-model selected value)
inputValue?: string (v-model:inputValue typed query)
options?: Array<{ label: string; value: string | number; disabled?: boolean }>
optionLabel?: string (default label)
optionValue?: string (default value)
placeholder?: string
disabled?: boolean
readonly?: boolean
loading?: boolean
loadingText?: string (default Loading...)
emptyText?: string (default No results)
filter?: boolean (default true)
strict?: boolean (default true)
allowCreate?: boolean (default false)
clearable?: boolean (default false)
size?: 'small' | 'normal' | 'large' (default normal)
variant?: 'filled' | 'outlined' (default filled)

Events:

update:modelValue
update:inputValue
change
search
create
focus
blur

Example:

<Combobox v-model="countryId" v-model:inputValue="countryQuery" :options="countries" placeholder="Pick country" />

Combobox tokens

Component tokens (override via theme.overrides.components.combobox):

minWidth, fontSize, controlGap, chevronSize
padding, borderRadius, borderColor
backgroundColor, textColor, placeholderColor
focusBorderColor, focusRingShadow, hoverBorderColor
disabledOpacity
panelBackgroundColor, panelBorderColor, panelPadding, panelMaxHeight, panelRadiusOffset, panelShadow
optionPadding, optionBorderRadius
optionHoverBackgroundColor, optionActiveBackgroundColor, optionActiveTextColor, optionHighlightedBackgroundColor
emptyPadding, emptyColor
loadingPadding, loadingColor
clearSize, clearRadius, clearHoverBackgroundColor
small.fontSize, small.padding
large.fontSize, large.padding

MultiSelect

Props:

modelValue?: Array<string | number> (v-model)
options?: Array<{ label: string; value: string | number; disabled?: boolean }>
optionLabel?: string (default label)
optionValue?: string (default value)
placeholder?: string
searchPlaceholder?: string (default Search...)
disabled?: boolean
readonly?: boolean
loading?: boolean
loadingText?: string (default Loading...)
emptyText?: string (default No results)
filter?: boolean (default true)
clearable?: boolean (default false)
size?: 'small' | 'normal' | 'large' (default normal)
variant?: 'filled' | 'outlined' (default filled)

Events:

update:modelValue
change
search
focus
blur

Example:

<MultiSelect v-model="countries" :options="countryOptions" placeholder="Select countries" clearable />

TagInput

Props:

modelValue?: Array<string | number> (v-model)
options?: Array<{ label: string; value: string | number; disabled?: boolean }>
optionLabel?: string (default label)
optionValue?: string (default value)
placeholder?: string
disabled?: boolean
readonly?: boolean
loading?: boolean
loadingText?: string (default Loading...)
emptyText?: string (default No results)
filter?: boolean (default true)
allowCustom?: boolean (default true)
maxTags?: number
clearable?: boolean (default false)
validateTag?: (value: string) => boolean
size?: 'small' | 'normal' | 'large' (default normal)
variant?: 'filled' | 'outlined' (default filled)

Events:

update:modelValue
change
search
add (payload: { value: string | number; source: 'option' | 'custom' })
remove
reject (payload: { reason: 'duplicate' | 'maxTags' | 'invalid' | 'readonly'; value: string })
focus
blur

Example:

<TagInput v-model="skills" :options="skillOptions" placeholder="Add skills" clearable />

TagInput tokens

Component tokens (override via theme.overrides.components.taginput):

minWidth, minHeight, fontSize, controlGap, chevronSize
padding, borderRadius, borderColor
backgroundColor, textColor, placeholderColor
focusBorderColor, focusRingShadow, hoverBorderColor
disabledOpacity
panelBackgroundColor, panelBorderColor, panelPadding, panelMaxHeight, panelRadiusOffset, panelShadow
optionPadding, optionBorderRadius
optionHoverBackgroundColor, optionHighlightedBackgroundColor
emptyPadding, emptyColor
loadingPadding, loadingColor
inputMinWidth
chipGap, chipPadding, chipRadius, chipBackgroundColor, chipTextColor, chipFontSize
chipRemoveSize, chipRemoveRadius, chipRemoveHoverBackgroundColor
clearSize, clearRadius, clearHoverBackgroundColor
small.fontSize, small.padding, small.chipPadding, small.chipFontSize
large.fontSize, large.padding, large.chipPadding, large.chipFontSize

MultiSelect tokens

Component tokens (override via theme.overrides.components.multiselect):

minWidth, fontSize, controlGap, chevronSize
padding, borderRadius, borderColor
backgroundColor, textColor, placeholderColor
focusBorderColor, focusRingShadow, hoverBorderColor
disabledOpacity
panelBackgroundColor, panelBorderColor, panelPadding, panelMaxHeight, panelRadiusOffset, panelShadow
searchPadding, searchBorderColor, searchBorderRadius
optionPadding, optionBorderRadius
optionHoverBackgroundColor, optionActiveBackgroundColor, optionActiveTextColor, optionHighlightedBackgroundColor
emptyPadding, emptyColor
loadingPadding, loadingColor
clearSize, clearRadius, clearHoverBackgroundColor
small.fontSize, small.padding
large.fontSize, large.padding

DatePicker

Props:

modelValue?: string (v-model, ISO date YYYY-MM-DD)
placeholder?: string
disabled?: boolean
readonly?: boolean
min?: string (ISO date YYYY-MM-DD)
max?: string (ISO date YYYY-MM-DD)
locale?: string (default en-US)
firstDayOfWeek?: number (default 0, Sunday)
size?: 'small' | 'normal' | 'large' (default normal)
variant?: 'filled' | 'outlined' (default filled)

Events:

update:modelValue
change
focus
blur

Example:

<DatePicker v-model="startDate" placeholder="Pick date" min="2026-01-01" max="2026-12-31" />

Calendar

Props:

modelValue?: string (v-model, ISO date YYYY-MM-DD)
disabled?: boolean
readonly?: boolean
min?: string (ISO date YYYY-MM-DD)
max?: string (ISO date YYYY-MM-DD)
locale?: string (default en-US)
firstDayOfWeek?: number (default 0, Sunday)
size?: 'small' | 'normal' | 'large' (default normal)
variant?: 'filled' | 'outlined' (default filled)

Events:

update:modelValue
change

Example:

<Calendar v-model="selectedDate" min="2026-01-01" max="2026-12-31" />
<Calendar v-model="selectedDateAlt" variant="outlined" :first-day-of-week="1" />

Calendar tokens

Component tokens (override via theme.overrides.components.calendar):

width, fontSize, padding
borderRadius, borderColor
backgroundColor, textColor
disabledOpacity
headerGap, headerPadding, monthLabelFontSize, monthLabelFontWeight
navButtonSize, navButtonRadius, navButtonFontSize
weekdayColor, weekdayFontSize, weekdaysMarginBottom
daysGap, daySize, dayFontSize, dayBorderRadius
dayHoverBackgroundColor, daySelectedBackgroundColor, daySelectedTextColor, dayMutedColor, dayTodayBorderColor
small.fontSize, small.padding, small.daySize
large.fontSize, large.padding, large.daySize

DateRangePicker

Props:

modelValue?: [string | null, string | null] | null (v-model, ISO date YYYY-MM-DD)
placeholder?: string
startPlaceholder?: string (default Start)
endPlaceholder?: string (default End)
separator?: string (default -)
disabled?: boolean
readonly?: boolean
min?: string (ISO date YYYY-MM-DD)
max?: string (ISO date YYYY-MM-DD)
locale?: string (default en-US)
firstDayOfWeek?: number (default 0, Sunday)
size?: 'small' | 'normal' | 'large' (default normal)
variant?: 'filled' | 'outlined' (default filled)

Events:

update:modelValue
change
focus
blur

Example:

<DateRangePicker v-model="dateRange" placeholder="Pick date range" min="2026-01-01" max="2026-12-31" />

TimePicker

Props:

modelValue?: string (v-model, time HH:mm)
placeholder?: string
disabled?: boolean
readonly?: boolean
min?: string (time HH:mm)
max?: string (time HH:mm)
step?: number (minutes, default 30)
format?: '24h' | '12h' (default 24h)
size?: 'small' | 'normal' | 'large' (default normal)
variant?: 'filled' | 'outlined' (default filled)

Events:

update:modelValue
change
focus
blur

Example:

<TimePicker v-model="meetingTime" placeholder="Pick time" min="09:00" max="18:00" :step="15" />

TimePicker tokens

Component tokens (override via theme.overrides.components.timepicker):

minWidth, fontSize, controlGap, chevronSize
padding, borderRadius, borderColor
backgroundColor, textColor, placeholderColor
focusBorderColor, focusRingShadow, hoverBorderColor
disabledOpacity
panelBackgroundColor, panelBorderColor, panelPadding, panelMaxHeight, panelRadiusOffset, panelShadow
optionPadding, optionBorderRadius
optionHoverBackgroundColor, optionActiveBackgroundColor, optionActiveTextColor
small.fontSize, small.padding
large.fontSize, large.padding

DateTimePicker

Props:

modelValue?: string (v-model, ISO datetime YYYY-MM-DDTHH:mm)
placeholder?: string
disabled?: boolean
readonly?: boolean
min?: string (ISO datetime YYYY-MM-DDTHH:mm)
max?: string (ISO datetime YYYY-MM-DDTHH:mm)
locale?: string (default en-US)
firstDayOfWeek?: number (default 0, Sunday)
minuteStep?: number (default 30)
format?: '24h' | '12h' (default 24h)
size?: 'small' | 'normal' | 'large' (default normal)
variant?: 'filled' | 'outlined' (default filled)

Events:

update:modelValue
change
focus
blur

Example:

<DateTimePicker v-model="meetingAt" placeholder="Pick date and time" />
<DateTimePicker
    v-model="meetingAtAlt"
    variant="outlined"
    min="2026-01-10T09:00"
    max="2026-12-31T18:00"
    :minute-step="15"
    format="12h"
/>

DateTimePicker tokens

Component tokens (override via theme.overrides.components.datetimepicker):

minWidth, fontSize, controlGap, chevronSize
padding, borderRadius, borderColor
backgroundColor, textColor, placeholderColor
focusBorderColor, focusRingShadow, hoverBorderColor
disabledOpacity
panelWidth, panelBackgroundColor, panelBorderColor, panelPadding, panelRadiusOffset, panelShadow, panelGap
headerGap, headerPadding, monthLabelFontSize, monthLabelFontWeight
navButtonSize, navButtonRadius, navButtonFontSize
weekdayColor, weekdayFontSize, weekdaysMarginBottom
daysGap, daySize, dayFontSize, dayBorderRadius
dayHoverBackgroundColor, daySelectedBackgroundColor, daySelectedTextColor, dayMutedColor, dayTodayBorderColor
timesWidth, timesMaxHeight, timesPaddingLeft, timesBorderColor
timeOptionPadding, timeOptionBorderRadius, timeOptionFontSize
timeOptionHoverBackgroundColor, timeOptionActiveBackgroundColor, timeOptionActiveTextColor
small.fontSize, small.padding, small.daySize
large.fontSize, large.padding, large.daySize

Pagination

Props:

modelValue?: number (v-model, default 1)
totalItems?: number (default 0)
pageSize?: number (default 10)
totalPages?: number (optional override instead of totalItems/pageSize)
siblingCount?: number (default 1)
boundaryCount?: number (default 1)
disabled?: boolean
size?: 'small' | 'normal' | 'large' (default normal)
variant?: 'filled' | 'outlined' (default filled)
prevLabel?: string (default Prev)
nextLabel?: string (default Next)
ellipsisLabel?: string (default ...)

Events:

update:modelValue
change

Slots:

indicator - slot props: { step, index, status, active, completed, upcoming, error }
step - slot props: { step, index, status, active, completed, upcoming, error }

Example:

<Pagination v-model="page" :total-items="240" :page-size="20" />

Pagination tokens

Component tokens (override via theme.overrides.components.pagination):

gap, itemMinWidth, fontSize, padding
borderRadius, borderColor
backgroundColor, textColor
hoverBackgroundColor
activeBorderColor, activeBackgroundColor, activeTextColor
focusBorderColor, focusRingShadow
disabledOpacity, ellipsisPadding
small.fontSize, small.padding
large.fontSize, large.padding

DataTable

Props:

rows?: Array<Record<string, unknown>>
columns?: Array<{ field: string; header?: string; sortable?: boolean; align?: 'left' | 'center' | 'right'; width?: string; minWidth?: string; formatter?: (row, value, column) => string | number }>
rowKey?: string | ((row, index) => string | number)
sortable?: boolean
sortField?: string | null
sortOrder?: 'asc' | 'desc' | null
loading?: boolean
loadingText?: string (default Loading...)
emptyText?: string (default No data)
striped?: boolean (default false)
hover?: boolean (default true)
size?: 'small' | 'normal' | 'large' (default normal)
variant?: 'filled' | 'outlined' (default filled)
showHeader?: boolean (default true)
ariaLabel?: string (default Data table)

Events:

update:sortField
update:sortOrder
sort
rowClick

Slots:

header-{field}
cell-{field}
empty
loading

Example:

<DataTable
    :columns="[
        { field: 'name', header: 'Name', sortable: true },
        { field: 'role', header: 'Role' },
        { field: 'age', header: 'Age', align: 'right', sortable: true },
    ]"
    :rows="[
        { id: 1, name: 'Alice', role: 'Developer', age: 29 },
        { id: 2, name: 'Bob', role: 'Designer', age: 34 },
    ]"
    row-key="id"
    sortable
    striped
/>

DataTable tokens

Component tokens (override via theme.overrides.components.datatable):

borderColor, borderRadius, backgroundColor
fontSize, textColor
headerBackgroundColor, headerTextColor, headerFontSize, headerFontWeight, headerBorderColor, headerGap
rowBackgroundColor, rowTextColor, rowBorderColor
cellPadding
stripedBackgroundColor, hoverBackgroundColor
sortIconColor, sortIconActiveColor, sortIconSize
statePadding, stateTextColor
small.fontSize, small.cellPadding
large.fontSize, large.cellPadding

Textarea

Props:

modelValue?: string (v-model)
placeholder?: string
disabled?: boolean
readonly?: boolean
size?: 'small' | 'normal' | 'large' (default normal)
variant?: 'filled' | 'outlined' (default filled)
rows?: number (default 3)

Events:

update:modelValue
input
change
focus
blur

Example:

<Textarea v-model="bio" placeholder="Tell us about yourself" rows="4" />

RichTextEditor

Props:

modelValue?: string (v-model)
placeholder?: string
disabled?: boolean
readonly?: boolean
size?: 'small' | 'normal' | 'large' (default normal)
variant?: 'filled' | 'outlined' (default filled)
format?: 'markdown' | 'html' (default markdown)
rows?: number (default 6)
maxLength?: number (default 0, disabled when 0)
showToolbar?: boolean (default true)
toolbar?: Array<'bold' | 'italic' | 'underline' | 'link' | 'bulletList' | 'orderedList' | 'code'>
toolbarLabel?: string (default Text formatting toolbar)
ariaLabel?: string (default Rich text editor)

Events:

update:modelValue
input
change
focus
blur
action (payload: action, nextValue)

Example:

<RichTextEditor
    v-model="article"
    format="markdown"
    :rows="8"
    :max-length="2000"
    :toolbar="['bold', 'italic', 'link', 'bulletList', 'code']"
/>

FileUpload

Props:

modelValue?: File | File[] | null (v-model)
multiple?: boolean
accept?: string
disabled?: boolean
readonly?: boolean
maxSize?: number (bytes)
maxFiles?: number
placeholder?: string
buttonLabel?: string (default Browse)
size?: 'small' | 'normal' | 'large' (default normal)
variant?: 'filled' | 'outlined' (default filled)

Events:

update:modelValue
change
reject (payload: Array<{ file: File; reason: 'maxSize' | 'maxFiles'; maxSize?: number; maxFiles?: number }> )
focus
blur

Example:

<FileUpload v-model="attachments" multiple :max-files="5" :max-size="10_000_000" />

FileUpload tokens

Component tokens (override via theme.overrides.components.fileUpload):

minHeight, fontSize, gap, padding
borderRadius, borderColor
backgroundColor, textColor, placeholderColor
focusBorderColor, focusRingShadow, hoverBorderColor
disabledOpacity, dragBackgroundColor
listGap, itemPadding, itemBorderColor, itemBackgroundColor, itemRadius, itemTextColor, sizeTextColor
buttonPadding, buttonRadius, buttonBorderColor, buttonBackgroundColor, buttonTextColor, buttonHoverBackgroundColor
removeSize, removeRadius, removeHoverBackgroundColor
small.fontSize, small.padding, small.buttonPadding
large.fontSize, large.padding, large.buttonPadding

SearchInput

Props:

modelValue?: string (v-model)
placeholder?: string
disabled?: boolean
readonly?: boolean
debounce?: number (default 300)
loading?: boolean (default false)
clearable?: boolean (default false)
size?: 'small' | 'normal' | 'large' (default normal)
variant?: 'filled' | 'outlined' (default filled)
ariaLabel?: string (default Search input)

Events:

update:modelValue
input
change
search
clear
focus
blur

Example:

<SearchInput v-model="query" placeholder="Search..." clearable />
<SearchInput v-model="query" placeholder="Search..." :debounce="500" loading variant="outlined" />

SearchInput tokens

Component tokens (override via theme.overrides.components.searchInput):

gap, fontSize, padding
borderRadius, borderColor
backgroundColor, textColor, placeholderColor
focusBorderColor, focusRingShadow, hoverBorderColor
disabledOpacity
iconSize, iconColor
clearSize, clearRadius, clearHoverBackgroundColor
loadingSize, loadingBorderColor, loadingTopBorderColor
small.fontSize, small.padding, small.iconSize, small.clearSize
large.fontSize, large.padding, large.iconSize, large.clearSize

NumberInput

Props:

modelValue?: number | null (v-model)
min?: number
max?: number
step?: number (default 1)
precision?: number
placeholder?: string
disabled?: boolean
readonly?: boolean
controls?: boolean (default true)
size?: 'small' | 'normal' | 'large' (default normal)
variant?: 'filled' | 'outlined' (default filled)
ariaLabel?: string (default Number input)

Events:

update:modelValue
input
change
focus
blur

Example:

<NumberInput v-model="quantity" :min="0" :max="10" :step="1" />

PasswordInput

Props:

modelValue?: string (v-model)
placeholder?: string
disabled?: boolean
readonly?: boolean
autocomplete?: string (default current-password)
showToggle?: boolean (default true)
showStrength?: boolean (default false)
showCapsLockHint?: boolean (default true)
revealLabel?: string (default Show password)
hideLabel?: string (default Hide password)
revealText?: string (default Show)
hideText?: string (default Hide)
capsLockHint?: string (default Caps Lock is on)
weakLabel?: string (default Weak password)
mediumLabel?: string (default Medium password)
strongLabel?: string (default Strong password)
size?: 'small' | 'normal' | 'large' (default normal)
variant?: 'filled' | 'outlined' (default filled)
ariaLabel?: string (default Password input)

Events:

update:modelValue
input
change
focus
blur
toggleVisibility (payload: boolean)

Example:

<PasswordInput v-model="password" show-strength />

PasswordInput tokens

Component tokens (override via theme.overrides.components.passwordInput):

gap, fontSize, padding
borderRadius, borderColor
backgroundColor, textColor, placeholderColor
focusBorderColor, focusRingShadow, hoverBorderColor
disabledOpacity
toggleSize, toggleRadius, toggleColor, toggleHoverBackgroundColor
strengthGap, strengthTrackHeight, strengthTrackRadius, strengthTrackBackgroundColor
strengthWeakColor, strengthMediumColor, strengthStrongColor
metaFontSize, hintColor
small.fontSize, small.padding
large.fontSize, large.padding

OtpInput

Props:

modelValue?: string (v-model)
length?: number (default 6)
placeholder?: string
disabled?: boolean
readonly?: boolean
mask?: boolean (default false)
alphanumeric?: boolean (default false)
autocomplete?: string (default one-time-code)
autoFocus?: boolean (default false)
size?: 'small' | 'normal' | 'large' (default normal)
variant?: 'filled' | 'outlined' (default filled)
ariaLabel?: string (default OTP input)

Events:

update:modelValue
change
complete (payload: string)
focus
blur
paste (payload: string)

Example:

<OtpInput v-model="otp" :length="6" />
<OtpInput v-model="backupCode" :length="8" alphanumeric variant="outlined" />

OtpInput tokens

Component tokens (override via theme.overrides.components.otpInput):

gap, fontSize, cellSize, padding
borderRadius, borderColor
backgroundColor, textColor, placeholderColor
focusBorderColor, focusRingShadow, hoverBorderColor
disabledOpacity
small.cellSize, small.fontSize, small.padding
large.cellSize, large.fontSize, large.padding

ColorPicker

Props:

modelValue?: string (v-model)
format?: 'hex' | 'rgb' | 'hsl' (default hex)
alpha?: boolean (default false)
presets?: string[] (default [])
placeholder?: string
disabled?: boolean
readonly?: boolean
size?: 'small' | 'normal' | 'large' (default normal)
variant?: 'filled' | 'outlined' (default filled)
ariaLabel?: string (default Color picker)

Events:

update:modelValue
change
open
close

Example:

<ColorPicker v-model="brandColor" />
<ColorPicker v-model="brandColorRgba" format="rgb" alpha variant="outlined" />

ColorPicker tokens

Component tokens (override via theme.overrides.components.colorPicker):

minWidth, gap, fontSize, padding
borderRadius, borderColor
backgroundColor, textColor, placeholderColor
focusBorderColor, focusRingShadow, hoverBorderColor
disabledOpacity
swatchSize, swatchRadius
panelPadding, panelBorderColor, panelBackgroundColor, panelShadow, panelGap
rangeAccentColor
presetSize, presetRadius, presetBorderColor, presetHoverBorderColor
small.padding, small.fontSize, small.swatchSize, small.presetSize
large.padding, large.fontSize, large.swatchSize, large.presetSize

MaskedInput

Props:

modelValue?: string (v-model)
mask?: string | ((value: string) => string) (default '')
placeholder?: string
placeholderChar?: string (default _)
disabled?: boolean
readonly?: boolean
unmask?: boolean (default false)
size?: 'small' | 'normal' | 'large' (default normal)
variant?: 'filled' | 'outlined' (default filled)

Events:

update:modelValue
input
change
focus
blur
complete

Example:

<MaskedInput v-model="phone" mask="+7 (###) ###-##-##" />
<MaskedInput v-model="licenseRaw" mask="AA-####" unmask variant="outlined" />

MaskedInput tokens

Component tokens (override via theme.overrides.components.maskedInput):

gap, fontSize, padding
borderRadius, borderColor
backgroundColor, textColor, placeholderColor
focusBorderColor, focusRingShadow, hoverBorderColor
disabledOpacity
small.fontSize, small.padding
large.fontSize, large.padding

RadioGroup / RadioButton

Props (RadioGroup):

modelValue?: string | number | boolean (v-model)
name?: string
disabled?: boolean
variant?: 'filled' | 'outlined' (default filled)
direction?: 'vertical' | 'horizontal' (default vertical)

Props (RadioButton):

value?: string | number | boolean
label?: string
disabled?: boolean
name?: string
variant?: 'filled' | 'outlined' (default filled)

Example:

<RadioGroup v-model="plan" direction="horizontal">
    <RadioButton value="basic">Basic</RadioButton>
    <RadioButton value="pro">Pro</RadioButton>
</RadioGroup>

ButtonGroup

Props:

size?: 'small' | 'normal' | 'large' (inherits to nested Button/SplitButton when child props are not set)
variant?: 'filled' | 'outlined' | 'text' (inherits to nested Button/SplitButton)
severity?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' (inherits to nested Button/SplitButton)
disabled?: boolean (default false)
orientation?: 'horizontal' | 'vertical' (default horizontal)
attached?: boolean (default false)

Slots:

default - place Button / SplitButton items

Example:

<ButtonGroup attached size="small" variant="outlined" severity="primary">
    <Button label="Day" />
    <Button label="Week" />
    <Button label="Month" />
</ButtonGroup>

ButtonGroup tokens

Component tokens (override via theme.overrides.components.buttonGroup):

gap, borderRadius, disabledOpacity

Breadcrumbs

Props:

items?: Array<{ label?: string; to?: string; href?: string; url?: string; active?: boolean; disabled?: boolean }>
separator?: string (default /)
ariaLabel?: string (default Breadcrumbs)

Slots:

item - slot props: { item, index, isLast, active }
separator (optional) - slot props: { separator }

Example:

<Breadcrumbs
    :items="[
        { label: 'Home', to: '/' },
        { label: 'Settings', to: '/settings' },
        { label: 'Profile', active: true },
    ]"
/>

Breadcrumbs tokens

Component tokens (override via theme.overrides.components.breadcrumbs):

gap, fontSize, textColor, hoverColor, activeColor
separatorColor, disabledOpacity

Divider

Props:

orientation?: 'horizontal' | 'vertical' (default horizontal)
variant?: 'solid' | 'dashed' | 'dotted' (default solid)
inset?: boolean (default false)
label?: string
ariaLabel?: string (default Divider)

Slots:

default (optional) - custom label content (horizontal mode only)

Example:

<Divider />
<Divider label="OR" />
<div style="height: 32px; display: flex; align-items: center; gap: 8px">
    <span>Left</span>
    <Divider orientation="vertical" />
    <span>Right</span>
</div>

Divider tokens

Component tokens (override via theme.overrides.components.divider):

color, textColor, thickness, minLength
gap, inset
labelPadding, labelFontSize

PageHeader

Props:

title?: string
subtitle?: string
size?: 'small' | 'normal' | 'large' (default normal)
divider?: boolean (default false)

Slots:

breadcrumbs (optional)
title (optional) - replaces title prop rendering
subtitle (optional) - replaces subtitle prop rendering
meta (optional)
actions (optional)
default (optional) - additional body content

Example:

<PageHeader title="Projects" subtitle="Manage active projects and team workload.">
    <template #breadcrumbs>
        <Breadcrumbs :items="breadcrumbItems" />
    </template>
    <template #meta>
        <Badge severity="info" variant="soft">24 active</Badge>
        <Chip label="Last sync: 2m ago" />
    </template>
    <template #actions>
        <Button label="Import" variant="outlined" severity="secondary" />
        <Button label="New project" icon="plus" />
    </template>
</PageHeader>

PageHeader tokens

Component tokens (override via theme.overrides.components.pageHeader):

gap, contentGap, breadcrumbGap, actionsGap, metaGap
padding, borderRadius, borderColor, backgroundColor, textColor, dividerColor
titleFontSize, titleLineHeight, titleFontWeight
subtitleFontSize, subtitleColor
small.padding, small.titleFontSize, small.subtitleFontSize
large.padding, large.titleFontSize, large.subtitleFontSize

SegmentedControl

Props:

modelValue?: string | number (v-model)
options?: Array<{ label: string; value: string | number; disabled?: boolean }> (default [])
disabled?: boolean
fullWidth?: boolean (default false)
size?: 'small' | 'normal' | 'large' (default normal)
variant?: 'filled' | 'outlined' (default filled)
ariaLabel?: string
ariaLabelledby?: string

Events:

update:modelValue
change
focus
blur

Example:

<SegmentedControl
    v-model="view"
    :options="[
        { label: 'List', value: 'list' },
        { label: 'Grid', value: 'grid' },
        { label: 'Board', value: 'board' },
    ]"
/>

SegmentedControl tokens

Component tokens (override via theme.overrides.components.segmentedControl):

fontSize, padding, gap
borderRadius, borderColor, backgroundColor, textColor
hoverBackgroundColor, activeBackgroundColor, activeTextColor
focusRingShadow, disabledOpacity
segmentPadding, segmentRadius, segmentFontWeight
small.fontSize, small.padding, small.segmentPadding
large.fontSize, large.padding, large.segmentPadding

Tabs / Tab / TabPanel

Props (Tabs):

modelValue?: string | number (v-model)
disabled?: boolean
orientation?: 'horizontal' | 'vertical' (default horizontal)

Props (Tab):

value: string | number
label?: string
disabled?: boolean

Props (TabPanel):

value: string | number

Example:

<Tabs v-model="tab">
    <template #tabs>
        <Tab value="overview">Overview</Tab>
        <Tab value="settings">Settings</Tab>
    </template>
    <template #panels>
        <TabPanel value="overview">Overview content</TabPanel>
        <TabPanel value="settings">Settings content</TabPanel>
    </template>
</Tabs>

Tabs tokens

Component tokens (override via theme.overrides.components.tabs):

gap, listGap, listBorderWidth, listBorderColor, listVerticalPadding
tabPadding, tabFontSize, tabBorderRadius
tabTextColor, tabBackgroundColor, tabHoverBackgroundColor
tabActiveTextColor, tabActiveBackgroundColor, tabActiveBorderColor, tabActiveBorderWidth
panelPadding, panelBorderRadius, panelBackgroundColor, panelTextColor
disabledOpacity

Accordion / AccordionItem

Props (Accordion):

modelValue?: string | number | Array<string | number> (v-model)
multiple?: boolean (default false)
disabled?: boolean
variant?: 'filled' | 'outlined' (default filled)
size?: 'small' | 'normal' | 'large' (default normal)
ariaLabel?: string
ariaLabelledby?: string

Props (AccordionItem):

value: string | number
title?: string
disabled?: boolean
unmount?: boolean (default false)

Events:

update:modelValue
change

Example:

<Accordion v-model="faq">
    <AccordionItem value="shipping" title="Shipping">
        Shipping details
    </AccordionItem>
    <AccordionItem value="returns" title="Returns">
        Returns policy
    </AccordionItem>
</Accordion>

Accordion tokens

Component tokens (override via theme.overrides.components.accordion):

gap, borderRadius, borderColor, backgroundColor
headerGap, headerPadding, headerFontSize, headerFontWeight
headerTextColor, headerBackgroundColor, headerHoverBackgroundColor, headerActiveBackgroundColor
contentPadding, contentTextColor, contentBackgroundColor
iconSize, iconColor, dividerColor
focusRingShadow, disabledOpacity
small.headerPadding, small.headerFontSize, small.contentPadding
large.headerPadding, large.headerFontSize, large.contentPadding

Toast / ToastContainer

Props (Toast):

modelValue?: boolean (v-model)
title?: string
message?: string
severity?: 'neutral' | 'info' | 'success' | 'warn' | 'danger' (default neutral)
closable?: boolean (default true)
duration?: number (ms, default 0, no auto-close)

Props (ToastContainer):

position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' (default top-right)

Example:

<ToastContainer position="top-right">
    <Toast v-model="toastOpen" title="Saved" message="Changes are saved." severity="success" :duration="2500" />
</ToastContainer>

Toast tokens

Component tokens (override via theme.overrides.components.toast):

gap, padding, borderRadius, borderColor
backgroundColor, textColor, shadow, minWidth
fontSize, lineHeight, bodyGap
titleFontSize, titleFontWeight, closeSize
containerGap, containerPadding, containerMaxWidth, zIndex
info.*, success.*, warn.*, danger.* (backgroundColor/borderColor/textColor)

Alert

Props:

modelValue?: boolean (optional v-model)
title?: string
message?: string
severity?: 'neutral' | 'info' | 'success' | 'warn' | 'danger' (default neutral)
closable?: boolean (default false)
icon?: string

Slots:

default - message content (fallbacks to message)
title (optional)
icon (optional)
actions (optional)
close (optional)

Events:

update:modelValue
close

Example:

<Alert v-model="alertOpen" severity="warn" title="Unsaved changes" closable>
    You have unsaved form changes.
    <template #actions>
        <Button label="Save" size="small" />
    </template>
</Alert>

Alert tokens

Component tokens (override via theme.overrides.components.alert):

gap, padding, borderRadius, borderColor
backgroundColor, textColor, iconColor
fontSize, lineHeight, bodyGap
titleFontSize, titleFontWeight
actionsGap, closeSize, closeRadius, closeFontSize, closeHoverBackgroundColor
info.*, success.*, warn.*, danger.* (backgroundColor/borderColor/textColor)

EmptyState

Props:

title?: string
description?: string
icon?: string
size?: 'small' | 'normal' | 'large' (default normal)
variant?: 'filled' | 'outlined' (default filled)

Slots:

default - description content (fallbacks to description)
title (optional)
icon (optional)
actions (optional)

Example:

<EmptyState title="No projects yet" description="Create your first project to get started." icon="📂">
    <template #actions>
        <Button label="Create project" size="small" />
        <Button label="Import" size="small" severity="secondary" />
    </template>
</EmptyState>

EmptyState tokens

Component tokens (override via theme.overrides.components.emptyState):

gap, bodyGap, padding, borderRadius
borderColor, backgroundColor, textColor, maxWidth
iconSize, iconColor
titleFontSize, titleLineHeight, titleFontWeight, titleColor
descriptionFontSize, descriptionLineHeight, descriptionColor
actionsGap
small.padding, small.iconSize, small.titleFontSize, small.descriptionFontSize
large.padding, large.iconSize, large.titleFontSize, large.descriptionFontSize

Textarea tokens

Component tokens (override via theme.overrides.components.textarea):

gap, fontSize, padding
borderRadius, borderColor
backgroundColor, textColor, placeholderColor
focusBorderColor, focusRingShadow, hoverBorderColor
disabledOpacity
minHeight, resize
small.fontSize, small.padding
large.fontSize, large.padding

RichTextEditor tokens

Component tokens (override via theme.overrides.components.richTextEditor):

gap, fontSize, padding
borderRadius, borderColor
backgroundColor, textColor, placeholderColor
focusBorderColor, focusRingShadow, hoverBorderColor
disabledOpacity
minHeight, resize
toolbarGap, toolbarPadding, toolbarBorderColor, toolbarBackgroundColor
toolbarButtonMinWidth, toolbarButtonPadding, toolbarButtonRadius
toolbarButtonBorderColor, toolbarButtonBackgroundColor, toolbarButtonTextColor
toolbarButtonHoverBackgroundColor, toolbarButtonActiveBackgroundColor
counterFontSize, counterColor, counterDangerColor
small.fontSize, small.padding, small.toolbarButtonPadding
large.fontSize, large.padding, large.toolbarButtonPadding

Modal

Props:

modelValue?: boolean (v-model)
title?: string
size?: 'sm' | 'md' | 'lg'
closeOnOverlay?: boolean (default true)
closeOnEsc?: boolean (default true)
showClose?: boolean (default true)
lockScroll?: boolean (default true)

Slots:

header (optional) - replaces the title area
body (optional) - modal content (defaults to default slot if not provided)
default (optional) - modal content if body slot is not used
footer (optional)
close (optional) - custom close button; slot props: { close }

Events:

update:modelValue
open
close

Example:

<Modal v-model="open" title="Confirm action" size="sm">
    <template #body>
        <p>Are you sure?</p>
    </template>
    <template #footer>
        <Button label="Cancel" severity="secondary" @click="open = false" />
        <Button label="Confirm" @click="open = false" />
    </template>
</Modal>

Modal tokens

Component tokens (override via theme.overrides.components.modal):

width, maxWidth, maxHeight
widthSm, maxWidthSm
widthLg, maxWidthLg
padding, borderRadius
backgroundColor, textColor
overlayBackgroundColor
shadow
zIndex
headerGap, bodyGap, footerGap
titleFontSize, titleLineHeight, titleFontWeight
closeSize, closeRadius, closeOffset
closeColor, closeFontSize, closeHoverBackgroundColor

ConfirmDialog

Props:

modelValue?: boolean (v-model)
title?: string (default Confirm action)
message?: string
confirmLabel?: string (default Confirm)
cancelLabel?: string (default Cancel)
confirmSeverity?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' (default danger)
loading?: boolean (default false)
closeOnConfirm?: boolean (default true)
size?: 'sm' | 'md' | 'lg' (default sm)
closeOnOverlay?: boolean (default true)
closeOnEsc?: boolean (default true)
showClose?: boolean (default true)
lockScroll?: boolean (default true)

Slots:

default (optional) - dialog message/body content (fallbacks to message)
actions (optional) - custom action buttons; slot props: { confirm, cancel }

Events:

update:modelValue
confirm
cancel
open
close

Example:

<ConfirmDialog
    v-model="open"
    title="Delete item?"
    message="This action cannot be undone."
    confirm-label="Delete"
    @confirm="removeItem"
/>

ConfirmDialog tokens

Component tokens (override via theme.overrides.components.confirmDialog):

maxWidth
messageColor, messageFontSize, messageLineHeight
actionsGap

Drawer

Props:

modelValue?: boolean (v-model)
title?: string
position?: 'left' | 'right' | 'top' | 'bottom' (default right)
size?: 'sm' | 'md' | 'lg'
overlay?: boolean (default true)
closeOnOverlay?: boolean (default true)
closeOnEsc?: boolean (default true)
showClose?: boolean (default true)
lockScroll?: boolean (default true)

Slots:

header (optional) - replaces the title area
body (optional) - drawer content (defaults to default slot if not provided)
default (optional) - drawer content if body slot is not used
footer (optional)
close (optional) - custom close button; slot props: { close }

Events:

update:modelValue
open
close

Example:

<Drawer v-model="open" title="Filters" position="right">
    <template #body>
        <p>Drawer content</p>
    </template>
    <template #footer>
        <Button label="Reset" severity="secondary" size="small" />
        <Button label="Apply" size="small" @click="open = false" />
    </template>
</Drawer>

Drawer tokens

Component tokens (override via theme.overrides.components.drawer):

width, widthSm, widthLg
height, heightSm, heightLg
padding, borderRadius
backgroundColor, textColor
overlayBackgroundColor
shadow
zIndex
headerGap, bodyGap, footerGap
titleFontSize, titleLineHeight, titleFontWeight
closeSize, closeRadius, closeOffset
closeColor, closeFontSize, closeHoverBackgroundColor

Dropdown

Props:

modelValue?: boolean (v-model)
items?: Array<{ label?: string; to?: string; href?: string; url?: string; icon?: string; disabled?: boolean; separator?: boolean; command?: () => void }>
placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'bottom' | 'top' (default bottom-start)
offset?: number (default 6)
disabled?: boolean
closeOnSelect?: boolean (default true)
closeOnEsc?: boolean (default true)
matchTriggerWidth?: boolean (default true)

Slots:

trigger
default (optional) - dropdown content (defaults to items list if provided)

Note: For custom dropdown content, add data-dropdown-close to clickable elements to auto-close on click.

Events:

update:modelValue
open
close
select

Example:

<Dropdown :items="menuItems">
    <template #trigger>
        <Button label="Actions" />
    </template>
</Dropdown>

Dropdown tokens

Component tokens (override via theme.overrides.components.dropdown):

panelPadding, panelBorderRadius, panelBorderColor
panelBackgroundColor, panelShadow, zIndex
disabledOpacity, itemPadding

ContextMenu

Props:

modelValue?: boolean (v-model)
items?: Array<{ label?: string; to?: string; href?: string; url?: string; icon?: string; disabled?: boolean; separator?: boolean; command?: () => void }>
disabled?: boolean
closeOnSelect?: boolean (default true)
closeOnEsc?: boolean (default true)
offset?: number (default 2)

Slots:

default - context area/target
menu (optional) - menu content (defaults to items list if provided)

Note: For custom menu content, add data-context-menu-close to clickable elements to auto-close on click.

Events:

update:modelValue
open
close
select
contextmenu

Example:

<ContextMenu :items="menuItems">
    <div class="surface">Right-click here</div>
</ContextMenu>

ContextMenu tokens

Component tokens (override via theme.overrides.components.contextMenu):

minWidth
panelPadding, panelBorderRadius, panelBorderColor
panelBackgroundColor, panelShadow, zIndex
disabledOpacity, itemPadding

CommandPalette

Props:

modelValue?: boolean (v-model)
items?: Array<{ label: string; value?: string | number; description?: string; shortcut?: string; group?: string; disabled?: boolean; keywords?: Array<string>; command?: () => void }>
placeholder?: string (default Type a command or search...)
emptyText?: string (default No commands found)
ariaLabel?: string (default Command palette)
closeOnOverlay?: boolean (default true)
closeOnEsc?: boolean (default true)
closeOnSelect?: boolean (default true)
filter?: boolean (default true)
enableShortcut?: boolean (default true)
shortcutKey?: string (default k)

Events:

update:modelValue
open
close
select
search

Example:

<CommandPalette
    v-model="open"
    :items="[
        { label: 'Open docs', value: 'docs', group: 'Navigation' },
        { label: 'Save and publish', value: 'publish', group: 'Actions', shortcut: 'Ctrl+Enter' },
    ]"
    @select="onCommand"
/>

CommandPalette tokens

Component tokens (override via theme.overrides.components.commandPalette):

width, maxWidth, maxHeight
padding, borderRadius, borderColor
backgroundColor, textColor, overlayBackgroundColor
shadow, zIndex, headerGap
inputPadding, inputBorderRadius, inputBorderColor
inputBackgroundColor, inputTextColor, inputPlaceholderColor
inputFocusBorderColor, inputFocusRingShadow
listGap, groupGap
groupLabelPadding, groupLabelColor, groupLabelFontSize
itemPadding, itemBorderRadius, itemGap
itemTextColor, itemDescriptionColor, itemDescriptionFontSize
itemActiveBackgroundColor, itemActiveTextColor, itemDisabledOpacity
shortcutPadding, shortcutBorderRadius, shortcutBorderColor
shortcutBackgroundColor, shortcutTextColor, shortcutFontSize
emptyPadding, emptyColor

NotificationCenter

Props:

modelValue?: boolean (v-model)
items?: Array<{ id: string | number; title: string; message?: string; date?: string; read?: boolean; severity?: 'neutral' | 'info' | 'success' | 'warn' | 'danger'; avatar?: string }>
title?: string (default Notifications)
emptyText?: string (default No notifications)
closeOnOverlay?: boolean (default true)
`closeOnEsc?:

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

VueForge

Install

Usage

Components

Form

Form tokens

FormField

InputGroup / InputAddon

InputGroup tokens

InlineEdit

InlineEdit tokens

MentionInput

MentionInput tokens

Autocomplete

Combobox

Combobox tokens

MultiSelect

TagInput

TagInput tokens

MultiSelect tokens

DatePicker

Calendar

Calendar tokens

DateRangePicker

TimePicker

TimePicker tokens

DateTimePicker

DateTimePicker tokens

Pagination

Pagination tokens

DataTable

DataTable tokens

Textarea

RichTextEditor

FileUpload

FileUpload tokens

SearchInput

SearchInput tokens

NumberInput

PasswordInput

PasswordInput tokens

OtpInput

OtpInput tokens

ColorPicker

ColorPicker tokens

MaskedInput

MaskedInput tokens

RadioGroup / RadioButton

ButtonGroup

ButtonGroup tokens

Breadcrumbs

Breadcrumbs tokens

Divider

Divider tokens

PageHeader

PageHeader tokens

SegmentedControl

SegmentedControl tokens

Tabs / Tab / TabPanel

Tabs tokens

Accordion / AccordionItem

Accordion tokens

Toast / ToastContainer

Toast tokens

Alert

Alert tokens

EmptyState

EmptyState tokens

Textarea tokens

RichTextEditor tokens

Modal

Modal tokens

ConfirmDialog

ConfirmDialog tokens