This project is a personal exploration of building desktop UI components with Electron and Vue 3. It started as a way to learn and better understand Electron and Vue 3 in practice, and is built on top of the electron-vite setup.
The components are designed specifically for desktop applications, following common desktop UI conventions, with naming and behavior informed by WinUI 3, and the set continues to grow over time.
At this stage, the project is not yet a standalone npm component library. Instead, components are developed and iterated within this gallery application, focusing on experimentation and pattern refinement before moving toward a more formal setup.
Visually, the design leans toward a retro, skeuomorphic style, using subtle depth and engraved details to create a classic desktop look and feel.
TkButton is a basic button component for common user actions.
It provides five visual themes: primary, secondary, success, warning, and danger.
An optional subtle deboss effect can be enabled via props, intended to give the content a lightly pressed feel, like text written into paper.
<TkButton theme="primary" deboss>
Primary
</TkButton>
TkHyperlinkButton is a text-based button component for lightweight, inline user actions.
It provides five visual themes: primary, secondary, success, warning, and danger.
An optional subtle emboss effect can be enabled via props, intended to give the text a slightly raised feel and suggest its clickability. A background color appears on hover to indicate interactivity.
<TkHyperlinkButton theme="primary" emboss>
Primary
</TkHyperlinkButton>
TkToggleButton is a button component that represents a toggleable on/off state.
It shares the same visual themes and optional deboss effect as TkButton.
When turned off, the button uses a neutral background regardless of theme. When turned on, it adopts the selected theme color, with an inner shadow, similar to a physical switch that latches into the on position.
TkToggleButton represents a boolean on/off state and is controlled via v-model.
<TkToggleButton v-model="isOn" theme="primary" deboss>
Primary
</TkToggleButton>
TkCheckBox is a checkbox component that represents a checked or unchecked state.
It supports small, medium, and large sizes.
The layout between the checkbox box and its content can be adjusted via the orientation prop.
It can also display an indeterminate state, typically used for a parent checkbox that controls multiple child options when only some are selected.
TkCheckBox represents a boolean checked state and is controlled via v-model.
<TkCheckBox v-model="isChecked">
Option
</TkCheckBox>A common pattern is to use a parent checkbox to control a group of child options.
<TkCheckBox v-model="allChecked" :indeterminate="isIndeterminate">Total</TkCheckBox>
<TkCheckBox v-model="isLargeChecked" size="large">Large</TkCheckBox>
<TkCheckBox v-model="isMediumChecked" size="medium">Medium</TkCheckBox>
<TkCheckBox v-model="isSmallChecked" size="small">Small</TkCheckBox>const isLargeChecked = ref(false)
const isMediumChecked = ref(true)
const isSmallChecked = ref(false)
const items = [isLargeChecked, isMediumChecked, isSmallChecked]
const allChecked = computed({
get: () => items.every((item) => item.value),
set: (value: boolean) => items.forEach((item) => (item.value = value))
})
const isIndeterminate = computed(() => {
const checked = items.filter((item) => item.value).length
return checked > 0 && checked < items.length
})
TkRadioButton is a radio button component that represents a single selectable option in a mutually exclusive set.
It supports small, medium, and large sizes.
The layout between the radio circle and its content can be adjusted via the orientation prop.
TkRadioButton can be used independently, or placed inside TkRadioButtons for grouped selection. In that case, shared group state such as v-model, name, and disabled is managed by the parent container.
TkRadioButton can be used on its own by sharing the same v-model and name across multiple options.
<TkRadioButton v-model="selectedValue" :value="0" name="demo">0</TkRadioButton>
<TkRadioButton v-model="selectedValue" :value="1" name="demo">1</TkRadioButton>
<TkRadioButton v-model="selectedValue" :value="2" name="demo">2</TkRadioButton>It can also be used inside TkRadioButtons, which manages the shared group state for its child radio buttons.
<TkRadioButtons v-model="selectedValue" direction="row">
<TkRadioButton :value="0" size="large">Large</TkRadioButton>
<TkRadioButton :value="1" size="medium">Medium</TkRadioButton>
<TkRadioButton :value="2" size="small">Small</TkRadioButton>
</TkRadioButtons>
TkToggleSwitch is a switch component that represents a toggleable on/off state.
It supports small, medium, and large sizes, and shares the same visual themes as TkToggleButton.
The layout between the switch and its content can be adjusted via the orientation prop.
When turned off, the switch uses a neutral background regardless of theme. When turned on, it adopts the selected theme color, similar to a physical switch flipped to the on position.
TkToggleSwitch represents a boolean on/off state and is controlled via v-model.
<TkToggleSwitch v-model="isOn" theme="primary">
Primary
</TkToggleSwitch>