Template documentation

Actions and navigation

<echo-button variant="filled" intent="primary">Save</echo-button>
<echo-chip>tag</echo-chip> · <echo-badge intent="success">ok</echo-badge> · <echo-pill>4</echo-pill>
<echo-dropdown label="Account"><template #trigger>…</template>…</echo-dropdown>
<echo-tabs v-model="tab" :tabs="TABS" />
<echo-pagination v-model="page" :pages="12" />
<echo-breadcrumb :items="TRAIL" />

Forms

<echo-field v-slot="{ id, fieldName }" label="E-mail" name="email"><echo-input :id="id" v-model="email" :name="fieldName" /></echo-field>
<echo-input v-model="text" type="email" size="sm" />
<echo-textarea v-model="note" rows="3" />
<echo-select v-model="topic"><option value="a">A</option></echo-select>
<echo-search-select v-model="country" list-id="countries" :options="names" />
<echo-date-picker v-model="birthday" mode="date" :start-year="1990" />
<echo-phone-input v-model="phone" country="br" @validity="ok = $event" />
<echo-checkbox v-model="agreed">I agree</echo-checkbox>
<echo-radio v-model="skin" name="skin" value="bordered" />
<echo-switch v-model="on" />
<echo-slider v-model="zoom" :min="1" :max="4" :step="0.01" />
<echo-rating v-model="stars" />
<echo-tags-input v-model="tags" />
<echo-file-button accept="image/*" @files="onFiles">Choose</echo-file-button>
<echo-dropzone accept="image/*" @files="onFiles">…</echo-dropzone>

Feedback and waiting

<echo-alert tone="danger" title="That failed">…</echo-alert>
<echo-modal ref="el" title-id="x-title" size="md"><template #title>…</template>…</echo-modal>
<echo-drawer ref="el" title-id="y-title">…</echo-drawer>
useToast().push({ tone: 'success', title: 'Done', message: 'Saved.' })
<echo-block :loading="pending" label="Loading…">…</echo-block>
<echo-loader :loading="loading">…</echo-loader>
<echo-skeleton :lines="3" /> · <echo-spinner size="sm" />
<echo-progress :value="64" label="Progress" /> · <echo-ring :value="76" />

Content

<echo-card title="Team" subtitle="Who works here" :loading="pending">…</echo-card>
<echo-list><echo-list-item title="Row" /></echo-list>
<echo-data-table :rows="ROWS" :columns="COLS" />
<echo-avatar :src="url" name="Ada Lovelace" size="lg" />
<echo-gallery :items="IMAGES" />
<echo-tree :nodes="NODES" /> · <echo-timeline :items="STEPS" />
<echo-collapse><template #summary>…</template>…</echo-collapse>
<echo-stat label="Visits" value="24.8k" :delta="12.4" />
<echo-player :src="video" />

Media and codes

<echo-chart :option="option" summary="What the chart says" height="280px" />
<echo-map :lat="-25.5" :lng="-54.6" :zoom="12" :markers="PINS" />
<echo-carousel label="Slides" loop autoplay>…</echo-carousel>
<echo-editor v-model="html" label="Body" />
<echo-image-cropper ref="el" :usages="['avatar']" mask="square" @apply="upload" />
<echo-image-viewer ref="el" :src="url" :caption="url" />
<echo-qr-code value="https://example.com" :size="180" />
<echo-barcode value="ECHO-2026-0001" format="CODE128" />

Calendar

<echo-calendar v-model:view="view" v-model:date="day" :events="EVENTS" @create="onCreate" @open="onOpen" />
<echo-calendar-mini v-model="day" :events="EVENTS" />

Account modals

<auth-login-form :form-id="id" :pending="sending" :error="failure" @submit="signIn" />
<auth-register-form :form-id="id" @submit="register" @login="toLogin" />
<auth-forgot-password-form :form-id="id" :sent="sent" @submit="recover" />
<auth-update-password-form :form-id="id" require-current @submit="changePassword" />
<auth-page-shell :title="title" :image="COVER" cover-title="…">…</auth-page-shell>
<auth-login-modal ref="el" :pending="sending" :error="failure" @submit="signIn" />
<auth-register-modal ref="el" @submit="register" @login="switchToLogin" />
<auth-forgot-password-modal ref="el" :sent="sent" @submit="recover" />
<auth-update-password-modal ref="el" require-current @submit="changePassword" />
<auth-lock-modal ref="el" :name="user.name" :avatar="user.avatar" @submit="unlock" />

Chrome (bars, footers, rails)

<masthead-ecommerce :links="LINKS" :departments="DEPARTMENTS" :cart-count="3" @search="onSearch" />
<masthead-learn :links="LINKS" :course="course" :done="17" :total="24" />
<masthead-help-desk :links="LINKS" :status="status" status-tone="success" :ticket-label="label" />
<masthead-landing :links="SECTIONS" :cta-label="cta" floating />
<footer-ecommerce :columns="COLUMNS" :legal="LEGAL" phone="…" email="…" />
<footer-learn :columns="COLUMNS" :cta-title="…" :cta-label="…" /> · <footer-landing :links="LINKS" :tagline="…" />
<sidebar-panel v-model:collapsed="collapsed" :groups="GROUPS" />
<sidebar-docs :groups="NAV" content-selector="#guide" /> · <sidebar-filters v-model="picked" :groups="FILTERS" />
<element-theme-switch /> · <element-language-switch compact /> · <element-currency-switch />

2026-08-11

• Theme width: The content ruler went from two values to three (compact, extended, full), with the deployment’s default coming from NUXT_THEME_WIDTH / NUXT__THEME_WIDTH and baked into the pre-paint script.
• Bars, footers and rails: Five mastheads and five footers (shop, property portal, course, help desk, landing), three side rails and the switchers page, with a phone preview in a real viewport.
• Account in two shapes: The fields moved out of the modals into components of their own, and the four routines gained real routes with no masthead, as a centred card or as a split with artwork over 60% of the screen.
• Calendar: An agenda in four views, a small month for the rail and the date arithmetic in utilities - no new dependency, over the theme’s own tokens.
• Showcase redistributed: Buttons and labels split into separate pages, an authentication group, a navigation group carrying the chrome and a page of whole forms.
• One API origin: The Reference publishes the deployment’s origin and nothing else, and the test panel fires at it: the server select was a second source of truth.
• Agent guide: Downloadable documents under /agentes: the whole system in one file and one version per showcase page.

2026-08-05

• Split showcase: The single eight-hundred-line page became six routes with a sidebar, one per subject.
• Navigation: Pagination, breadcrumb, tabs with a real ARIA tablist, timeline and drawer.
• Dashboard primitives: Progress bar, ring and stat row; dashboard cards became composition of those.
• Card and list: Card with header, media and the four actions (collapse, refresh, expand, remove), plus List in three densities.
• Media player: Plyr as the first runtime dependency, for Vimeo and YouTube behind a single interface.
• Toasts: A global queue with the position in state, and the same accent wedge as alerts and modals.
• Rating: Read-only with fractions and interactive over native radios, with keyboard arrows for free.
• Controls and scale: Toggler, checkbox, radio, native date and color pickers, and the sm/md/lg button scale.
• Intent system: Ten intents with variants for buttons, chips, badges and pills, on two class axes.
• Alerts in eight tones: The four named tonal ones join the palette, with the rounded accent wedge.
• Native modals: Opaque dialog with an intent wedge, blurred background, width scale and locked scrolling.
• Showcase and typography: The /componentes and /tipografia pages with every element of the system.
• Three families: Manrope, Montserrat and JetBrains Mono, each with its fixed role in the system.