Showcase index

Actions

Forms

Feedback

Feedback

Content

Navigation

Collapses, accordion, tree and dropdown menu: all on native elements, with keyboard for free.

Collapses

The native details element dressed as a flat card: it opens, closes and stays accessible without a line of JS.

What does this component use underneath?

The browser's native details element. The template only swaps the default marker for the chevron and dresses it in the system's flat card.

Why not a JS accordion?

Because the native one already delivers keyboard, screen reader and open/closed state for free. JS comes in only when the behavior asks for more.

Can an item start open by default?

Yes: the open attribute on details, as the first item of this list demonstrates.

Accordion

The same blocks sharing a name attribute: the browser closes the open one when another opens, without a line of JS.

What sets an accordion apart from a collapse?

The accordion keeps a single block open at a time. Here that comes from the native details name attribute, not from state held in script.

Do I need JavaScript for this?

No. The grouping belongs to the element itself; where the browser has not implemented it yet, the blocks open together, which is degradation and not breakage.

Can one start open?

Yes, the open attribute on the first block, as this list demonstrates.

Tree

Hierarchy with nested details: keyboard and state come from the native disclosure, and the guide line draws the levels without an image.

app/
- assets/css/
  - main.css
- components/
  - echo/
    Modal.vue
    Button.vue
  - layout/
- pages/
  - index.vue
  - componentes/
i18n/locales/
- es.json
- pt-BR.json
- en.json
shared/
nuxt.config.ts

Dropdown menu

The page menu on the theme surface, with click-outside, Escape, Tab-out and focus returning to the trigger.

Dividers

The line that cuts the page, with or without a label. Without text it is a real hr, the element that means a thematic break; with text it becomes a div, because hr is empty by definition.

align

start

start-center

center

end-center

end

style

solid

dotted

dashed

.es-i--*

primary

success

danger

warning

info

dark

vertical

Left

Middle

Right

Pagination and breadcrumb

The page window is computed rather than a full list: with a hundred pages, a hundred buttons would be a hundred Tab stops before the content. The current one carries aria-current, because color alone does not say where you are.

.es-pagination

.es-breadcrumb

Tabs

A real ARIA tablist: arrow keys move through the tabs and only the active one stays in the Tab flow. Without that roving focus, Tab would stop at every tab before reaching the content.

The first tab panel. The tab/panel pair is tied by aria-controls and aria-labelledby.

Timeline

An ordered list, because the order is the content. The rail is a border and the marker is a pseudo-element: not a pixel of image.

New components2026-08-06
Pagination, tabs, timeline, drawer and tags joined the system.
Advanced cards2026-08-05
Bar, ring and stat became primitives, and dashboard cards became composition.
Split showcase2026-07-28
The single page became six, with a sidebar and one route per subject.

<echo-drawer>

A native dialog pinned to the edge: trapped focus, Escape and an inert background come from the element. Here clicking outside closes, unlike the modal, because a drawer is navigation and not a decision.