Design systems

Agala UI

A zero-dependency Vue 3 component library with typed APIs, atomic design tokens, theming, and accessibility at its foundation.

Role
Creator & maintainer
Stack
Vue 3 · TypeScript · Vite · CSS tokens · npm workspaces
View repository

The challenge

Product teams lose time and consistency when every interface rebuilds the same controls, keyboard behavior, and responsive decisions from scratch.

The approach

Decisions that shaped the work.

  1. 01

    Established atomic CSS tokens and theme boundaries before styling individual components.

  2. 02

    Designed typed Vue APIs for common controls, navigation, overlays, data display, forms, and scheduling workflows.

  3. 03

    Extracted repeated accessibility behavior into focused composables for keyboard navigation, popovers, media queries, and selection.

  4. 04

    Kept the core library deliberately light while separating charting into an independent workspace package.

A system, not a component shelf

Agala UI treats visual consistency and behavioral consistency as the same engineering problem. Buttons and inputs matter, but so do focus movement, overlay positioning, empty states, selection models, and the way a theme crosses package boundaries.

The library is organized around small typed contracts and composable behavior. That creates a stable foundation for product work without forcing every interface into one rigid visual expression.

The hard part

Scheduling pushed the system beyond isolated controls. Calendar month, week, day, and list views had to share date logic while supporting slot selection and different information densities. The result became a test of the entire design system: tokens, layout, state, keyboard behavior, and API shape working together.

What it demonstrates

  • Product-minded API design for frontend infrastructure
  • Accessible interaction patterns rather than visual-only components
  • Package architecture with a zero-dependency core
  • Long-term thinking about theme contracts and evolution

Built with intent in Buenos Aires.

© 2026 Julián Benitez