Skip to content
CairnCMS logo: a stack of stones forming a cairn CairnCMS

UI components

The admin app registers its component library globally, so an app extension can use those components in its own Vue templates without importing them. They are the same components the app is built from, so an extension that uses them looks and behaves like the rest of the application and stays consistent across themes.

<template>
  <v-notice type="warning">Heads up.</v-notice>
  <v-button @click="save">Save</v-button>
</template>

A globally registered VButton is used as <v-button> in a template.

Commonly used components

Section titled “Commonly used components”

This is a working subset, grouped by purpose. The registered set is larger.

  • Inputs and forms — v-input, v-textarea, v-select, v-checkbox, v-radio, v-slider, v-form, v-field-template, v-template-input, v-upload, v-date-picker.
  • Actions — v-button, v-icon, v-chip.
  • Containers and overlays — v-card, v-sheet, v-drawer, v-dialog, v-menu, v-overlay, v-divider, v-detail, v-tabs, v-tab.
  • Lists and tables — v-list, v-list-item, v-table, v-pagination, v-item-group.
  • Feedback and status — v-notice, v-error, v-info, v-progress-circular, v-progress-linear, v-skeleton-loader, v-badge, v-avatar.
  • Rendering helpers — render-template (renders a display template for an item), render-display (renders a single field display).

The component registry is the current catalog. If you need a component that is not listed here, check what the app registers before building your own.

Theme tokens

Section titled “Theme tokens”

Use the theme’s CSS variables for color, spacing, and radius rather than hard-coded values, so an extension follows the active theme automatically. The common tokens:

  • Color — --primary, --primary-alt, --background-page, --background-normal, --background-subdued, --background-input, --foreground-normal, --foreground-subdued.
  • Shape — --border-radius, --border-radius-outline.
<style scoped>
.badge {
  background-color: var(--primary);
  color: var(--foreground-inverted);
  border-radius: var(--border-radius);
}
</style>

A component or field that hard-codes a hex color breaks under a different theme. Reaching for a token keeps it theme-aware.

Where to go next

Section titled “Where to go next”