UI Kit Documentation - Tokenizer.Estate

01 Select

A versatile dropdown select component with support for single/multi selection, search filtering, server-side search, infinite scroll loading, and custom option/tag rendering.

Preview

Single Select

Multi Select

Props

Name	Type	Required	Description
modelValue	Array<string \| number> \| string \| number \| null	No	Selected value(s). Use v-model for two-way binding
options	SelectOption[]	Yes	Array of options with label, value, and optional disabled property
placeholder	string	No	Placeholder text when no option is selected
searchPlaceholder	string	No	Placeholder text for the search input inside dropdown
disabled	boolean	No	Disables the select component
clearable	boolean	No	Shows clear button to reset selection
singleSelect	boolean	No	Forces single selection mode
noResultsText	string	No	Text shown when search yields no results
dropdownMaxHeightClass	string	No	Custom CSS class for dropdown max height
isTransparent	boolean	No	Makes the select background transparent
searchOnServer	boolean	No	Enables server-side search mode
name	string	No	Form field name attribute

Events

Name	Payload	Description
@update:modelValue	string \| number \| (string \| number)[] \| null	Emitted when selection changes
@search	string	Emitted when user types in search input (for server-side search)
@load-more	void	Emitted when user scrolls to bottom (for infinite loading)

Slots

Name	Description
#tag	Custom template for selected tags in multi-select mode
#option	Custom template for dropdown options

02 DatePicker

A powerful date picker component built on top of vue-datepicker. Supports single date and date range selection, dark mode, teleportation for proper z-index handling, and programmatic control via exposed methods.

Preview

Single Date

Select date

Date Range

Select dates

Props

Name	Type	Default	Description
modelValue	Date \| Date[]	—	Selected date or date range. Use v-model for two-way binding
teleport	boolean	true	Teleports the calendar popup to body element
inTable	boolean	false	Optimizes styles for usage inside tables
initDate	Function	—	Function to initialize the default date
isClerable	boolean	true	Shows clear button to reset the date
dark	boolean	false	Enables dark theme for the calendar
isRange	boolean	true	Enables date range selection mode
size	"default" \| "large"	"default"	Size variant of the date picker input
name	string	—	Form field name attribute

Events

Name	Payload	Description
@update:modelValue	Date \| Date[] \| undefined	Emitted when date selection changes
@change	any	Emitted when date changes (alternative to v-model)

Exposed Methods

Method	Description
setDateRange	Method to programmatically set the date range: (dates: Date[] \| Date \| null) => void
clearDate	Method to clear the selected date: () => void
getCurrentValue	Method to get current value: () => Date \| Date[] \| undefined

03 CButton

A versatile button component with multiple visual variants, sizes, loading state, and full accessibility support.

Variants

Sizes

States

Props

Name	Type	Default	Description
variant	ButtonVariant	"brand"	"brand" \| "brand-outline" \| "primary" \| "primary-outline" \| "secondary" \| "error" \| "error-outline" \| "default" \| "custom"
size	ButtonSize	"medium"	"small" \| "medium" \| "large"
disabled	boolean	false	Disables the button
loading	boolean	false	Shows loading spinner and disables interaction

Slots

Name	Description
#default	Button content (text, icons, etc.)

04 IconButton

A compact icon-only button component with various visual variants. Perfect for toolbars, action buttons, and compact UI elements.

Green Variants

Dark & Black Variants

Red Variants

Disabled

Props

Name	Type	Default	Description
variant	IconButtonVariant	"filled-green"	"filled-green" \| "outlined-green" \| "small-green" \| "filled-dark-gray" \| "small-black" \| "filled-red" \| "outlined-red" \| "small-red" \| "small-black-to-green" \| "small-brand" \| "custom"
icon	IconName	—	Icon name from the built-in icon set
disabled	boolean	false	Disables the button

Slots

Name	Description
#default	Custom icon content (overrides icon prop)

05 Input

A flexible text input component with label support, error states, multiple input types, and customizable icon slots.

Preview

This field is required

Props

Name	Type	Default	Description
modelValue	string \| number	—	Input value. Use v-model for two-way binding
placeholder	string	—	Placeholder text shown when input is empty
label	string	—	Label text displayed above the input
errors	string \| string[]	—	Error message(s) to display below the input
disabled	boolean	false	Disables the input
type	TInputTypes	"text"	"text" \| "number" \| "email"
inputClass	string	—	Additional CSS class for the input element

Slots

Name	Description
#icon-left	Custom icon on the left side of input
#icon-right	Custom icon on the right side of input
#header-slot	Additional content in the header area

06 SearchInput

A specialized search input component with built-in search and clear icons. Extends CInput with search-specific features.

Preview

Props

Name	Type	Default	Description
modelValue	string \| number	—	Search input value. Use v-model for two-way binding
variant	"base" \| "table"	"base"	Visual variant: base for forms, table for compact headers
placeholder	string	—	Placeholder text
label	string	—	Label text displayed above the input
errors	string \| string[]	—	Error message(s) to display
disabled	boolean	false	Disables the input
type	TInputTypes	"text"	Input type (inherited from CInput)
inputClass	string	—	Additional CSS class for the input element

Slots

Name	Description
#header-slot	Additional content in the header area
#clear-icon	Custom clear button icon
#search-icon	Custom search icon

07 PasswordInput

A secure password input component with built-in show/hide toggle functionality. Extends CInput with password-specific features.

Preview

Props

Name	Type	Default	Description
modelValue	string \| number	—	Password value. Use v-model for two-way binding
placeholder	string	—	Placeholder text
label	string	—	Label text displayed above the input
errors	string \| string[]	—	Error message(s) to display
disabled	boolean	false	Disables the input
inputClass	string	—	Additional CSS class for the input element

Slots

Name	Description
#icon-left	Custom icon on the left side of input
#header-slot	Additional content in the header area
#toggle-icon-show	Custom icon for "show password" state
#toggle-icon-hide	Custom icon for "hide password" state

08 Textarea

A multi-line text input component with label support, error states, and optional resize functionality.

Preview

Message

Resizable

Disabled

Props

Name	Type	Default	Description
modelValue	string	—	Textarea value. Use v-model for two-way binding
placeholder	string	—	Placeholder text
label	string	—	Label text displayed above the textarea
errors	string \| string[]	—	Error message(s) to display
disabled	boolean	false	Disables the textarea
rows	number	4	Number of visible text rows
resizable	boolean	false	Allows user to resize the textarea
inputClass	string	—	Additional CSS class for the textarea element

Slots

Name	Description
#header-slot	Additional content in the header area

09 Checkbox

A styled checkbox component with label support, two size variants, and disabled state.

Default Size

Accept terms and conditions

Small Size

Subscribe to newsletter

Disabled States

Disabled unchecked

Disabled checked

Props

Name	Type	Default	Description
modelValue	boolean	—	Checkbox state. Use v-model for two-way binding
disabled	boolean	false	Disables the checkbox
size	CheckboxSize	"default"	"default" \| "small"

Slots

Name	Description
#default	Label content displayed next to the checkbox

10 Label

A status label component with semantic color variants. Perfect for displaying statuses, badges, and tags.

Variants

Success

Completed

Warning

Review Required

Pending

In Progress

Custom

Custom Style

Props

Name	Type	Default	Description
variant	LabelVariant	"success"	"success" \| "warning" \| "pending" \| "custom"

Slots

Name	Description
#default	Label text content

11 AdaptiveTabs

A responsive tab navigation component that automatically adapts to container width. Excess tabs are moved to an overflow menu.

Default Tabs

Active: tab1

Full Width Tabs

Active: overview

Props

Name	Type	Default	Description
modelValue	string	—	Active tab value. Use v-model for two-way binding
tabs	Tab[]	—	Array of tab objects with value, label, and optional exclude
minTabWidth	number	100	Minimum width of each tab in pixels
fullWidth	boolean	false	Makes tabs stretch to fill container width

Slots

Name	Description
#default	Custom tab content. Receives { value, label, exclude? } props

Tab Interface

interface Tab {
  value: string;    // Unique identifier
  label: string;    // Display text
  exclude?: boolean; // Hide from overflow menu
}

12 Toasts

A powerful toast notification system with multiple variants, auto-dismiss, and progress bar support. Uses the useToasts composable for programmatic control.

Demo

Toast Props

Name	Type	Default	Description
delay	number	5000	Auto-dismiss delay in milliseconds
manual	boolean	false	If true, toast will not auto-dismiss
type	ToastType	"success"	"success" \| "error" \| "warning"
noProgress	boolean	false	Hides the progress bar
noBorder	boolean	false	Removes the colored border
loader	ToastLoader	—	Loading spinner config: { show: boolean, color: string }
icon	ToastIcon	—	Custom icon config: { name: string, color: string }

AddToast Interface

Name	Type	Required	Description
title	string	Yes	Toast title text
description	string	No	Toast description text
delay	number	No	Auto-dismiss delay in ms
manual	boolean	No	Disable auto-dismiss
type	ToastType	No	Toast type variant
customComponent	Component	No	Custom Vue component to render

Usage

import { ToastsContainer, useToasts } from 'tokenizer-ui-kit';

const { toasts, add, remove } = useToasts();

// Show toast
const toast = add({
  title: 'Hello!',
  description: 'This is a notification.',
  type: 'success',
  delay: 5000,
});

// Remove toast programmatically
remove(toast.id);