Shared Components
Reusable UI primitives used across the customizer. These can also be used standalone if you import @chamevo/components.
cv-button
Button with variant, size, and disabled state.
<cv-button variant="primary" size="md">Save</cv-button>
<cv-button variant="secondary" size="sm">Cancel</cv-button>
<cv-button variant="ghost" size="sm">Reset</cv-button>
| Property | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'ghost' | 'primary' | Visual style. |
size | 'sm' | 'md' | 'lg' | 'md' | Button size. |
disabled | boolean | false | Disabled state. |
cv-icon
Phosphor Icons with 6 weight variants.
<cv-icon name="pencil" weight="regular" size="20"></cv-icon>
<cv-icon name="trash" weight="bold" size="24"></cv-icon>
| Property | Type | Default | Description |
|---|---|---|---|
name | string | — | Icon name from Phosphor Icons. |
weight | 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone' | 'regular' | Icon weight. |
size | number | 20 | Icon size in pixels. |
cv-dropdown
Dropdown menu with trigger and items.
cv-tabs
Tab navigation with panels.
<cv-tabs tabs='["Tab 1", "Tab 2", "Tab 3"]' active-index="0"></cv-tabs>
| Property | Type | Default | Description |
|---|---|---|---|
tabs | string | string[] | [] | Tab labels. |
activeIndex | number | 0 | Active tab index. |
cv-modal
Modal dialog with backdrop.
| Property | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Whether modal is visible. |
heading | string | '' | Modal heading text. |
cv-color-picker
HSV color picker with hue/saturation/value controls.
cv-color-palette
Grid of color swatches with selection ring.
| Property | Type | Default | Description |
|---|---|---|---|
colors | string[] | [] | Array of hex colors. |
value | string | '' | Currently selected color. |
cv-color-panel
Unified color editing combining picker, palette, and SVG path color tabs.
cv-action-menu
Three-dots dropdown menu for element actions (duplicate, remove, etc.).
cv-loader
Loading overlay with spinner animation.
| Property | Type | Default | Description |
|---|---|---|---|
active | boolean | false | Whether loader is visible. |
cv-notification
Toast notification for warning, error, and info messages.
| Property | Type | Default | Description |
|---|---|---|---|
variant | 'warning' | 'error' | 'info' | 'warning' | Visual variant. |
heading | string | '' | Notification heading. |
message | string | '' | Main message text. |
loading | boolean | false | When true, renders a loading spinner before the body. |
duration | number | 0 | Auto-dismiss duration in ms. 0 = no auto-dismiss. |