Skip to main content

​
Card

Container component with automatic height adjustment and masonry layout support. Source: src/components/Card.vue

​
Props

​
shadow
boolean
default:"true"
Whether to apply shadow effect to the card
​
border
boolean
default:"false"
Whether to show a border around the card
​
wrapperStyle
object
default:"{}"
Custom styles to apply to the wrapper element inside the card
​
ignoreStyleMutations
boolean
default:"false"
Whether to ignore content style mutations when deciding when to recalculate height

​
Events

  • height-change - Emitted when the card height changes

​
Exposed Methods

  • setHeight() - Manually trigger height recalculation (useful when content changes are undetectable by MutationObserver)

​
Usage

<template>
  <Card :shadow="true" :border="false">
    <h2>Card Content</h2>
    <p>Your content here...</p>
  </Card>
</template>

<script setup lang="ts">
import Card from '@/components/Card.vue';
</script>

​
RoundedButton

Styled button component with optional icon and multiple display modes. Source: src/components/RoundedButton.vue

​
Props

​
text
string
default:"'Button'"
Button text label
​
icon
object | null
default:"null"
FontAwesome icon object to display before text
​
invert
boolean
default:"false"
Invert colors - fills button with accent color
​
circular
boolean
default:"true"
Use circular border radius (pill shape)
​
showColor
boolean
default:"true"
Use accent color for border and text (otherwise uses secondary color)

​
Usage

<RoundedButton text="Click Me" />

​
IconButton

Icon-only button with modern glass-morphic styling. Source: src/components/IconButton.vue

​
Props

​
disabled
boolean
default:"false"
Whether the button is disabled

​
Events

  • click - Emitted when button is clicked (with MouseEvent parameter)

​
Usage

<template>
  <IconButton @click="handleClick" :disabled="false">
    <font-awesome-icon :icon="faGear" />
  </IconButton>
</template>

<script setup lang="ts">
import { faGear } from '@fortawesome/free-solid-svg-icons';
import IconButton from '@/components/IconButton.vue';

function handleClick(event: MouseEvent) {
  console.log('Button clicked!');
}
</script>
Animated dropdown select component with stagger animation. Source: src/components/Dropdown.vue

​
Props

​
options
string[]
required
Array of option strings to display
​
modelValue
number
required
Index of currently selected option (v-model compatible)
​
showSelectedAsOption
boolean
default:"true"
Whether to show the currently selected option in the dropdown list
​
align
'left' | 'right' | 'center'
default:"'right'"
Alignment of dropdown options
​
direction
'up' | 'down'
default:"'down'"
Direction to expand the dropdown

​
Events

  • update:modelValue - Emitted when selection changes (with selected index)

​
Usage

<template>
  <Dropdown
    :options="['Option 1', 'Option 2', 'Option 3']"
    v-model="selectedIndex"
    align="right"
    direction="down"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Dropdown from '@/components/Dropdown.vue';

const selectedIndex = ref(0);
</script>

​
ColorPicker

Advanced color picker with inheritance support for theme variables. Source: src/components/ColorPicker.vue

​
Props

​
modelValue
string
default:"''"
Current color value (hex, CSS color name, var(), or ‘inherit’)
​
allowInherit
boolean
default:"true"
Allow inheriting from theme variables
​
disableInlineButton
boolean
default:"false"
Hide the inheritance toggle button
​
placeholder
string
default:"'Color value'"
Placeholder text for the input field
​
propertyPath
string
Path to the property in theme styling (e.g., ‘header.background’)
​
label
string
default:"''"
Label text to display above the color picker

​
Events

  • update:modelValue - Emitted when color changes

​
Usage

<template>
  <ColorPicker
    v-model="accentColor"
    label="Accent Color"
    placeholder="#3B82F6"
    :allowInherit="true"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ColorPicker from '@/components/ColorPicker.vue';

const accentColor = ref('#3B82F6');
</script>

​
Checkbox

Custom animated checkbox component. Source: src/components/Checkbox.vue

​
Props

​
modelValue
boolean
required
Checked state (v-model compatible)
​
labelSize
string
default:"'.85em'"
Font size for the label text

​
Events

  • update:modelValue - Emitted when checkbox is toggled

​
Slots

  • default - Label content

​
Usage

<template>
  <Checkbox v-model="isChecked" labelSize="1em">
    Accept terms and conditions
  </Checkbox>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Checkbox from '@/components/Checkbox.vue';

const isChecked = ref(false);
</script>
Modal overlay component with backdrop. Source: src/components/Popup.vue

​
Props

​
show
boolean
required
Whether to display the popup

​
Events

  • close - Emitted when backdrop is clicked

​
Slots

  • default - Content to display in the popup

​
Usage

<template>
  <RoundedButton text="Open Popup" @click="showPopup = true" />
  
  <Popup :show="showPopup" @close="showPopup = false">
    <div style="padding: 20px;">
      <h2>Popup Content</h2>
      <p>This is a modal popup.</p>
    </div>
  </Popup>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Popup from '@/components/Popup.vue';
import RoundedButton from '@/components/RoundedButton.vue';

const showPopup = ref(false);
</script>

​
SliderInput

Range slider with synchronized number input. Source: src/components/SliderInput.vue

​
Props

​
modelValue
number
required
Current value (v-model compatible)
​
label
string
default:"''"
Label text to display
​
min
number
default:"0"
Minimum value
​
max
number
default:"100"
Maximum value
​
step
number
default:"1"
Step increment

​
Events

  • update:modelValue - Emitted when value changes
  • blur - Emitted when number input loses focus

​
Usage

<template>
  <SliderInput
    v-model="volume"
    label="Volume"
    :min="0"
    :max="100"
    :step="5"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import SliderInput from '@/components/SliderInput.vue';

const volume = ref(50);
</script>

​
InfoTooltip

Tooltip component for displaying additional information. Source: src/components/InfoTooltip.vue

​
Props

​
icon
object
default:"faInfoCircle"
FontAwesome icon to display as trigger

​
Slots

  • trigger - Custom trigger element (overrides icon prop)
  • default - Tooltip content

​
Usage

<template>
  <InfoTooltip>
    This is helpful information!
  </InfoTooltip>
</template>

<script setup lang="ts">
import InfoTooltip from '@/components/InfoTooltip.vue';
</script>

​
CollapsibleSection

Expandable/collapsible content section with smooth animation. Source: src/components/CollapsibleSection.vue

​
Props

​
modelValue
boolean
default:"false"
Expanded state (v-model compatible)
​
title
string
required
Section title text
​
disabled
boolean
default:"false"
Disable expansion/collapse functionality
​
headerClass
string
default:"''"
Additional CSS class for header
​
lockOpen
boolean
default:"false"
Keep section permanently expanded

​
Events

  • update:modelValue - Emitted when section is expanded/collapsed

​
Slots

  • default - Collapsible content
  • action - Action buttons/controls in header

​
Usage

<template>
  <CollapsibleSection v-model="isExpanded" title="Advanced Settings">
    <p>Additional configuration options...</p>
  </CollapsibleSection>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import CollapsibleSection from '@/components/CollapsibleSection.vue';

const isExpanded = ref(false);
</script>

Build docs developers (and LLMs) love

Get started for freeTalk to us