NUED

Frontend Engineer / Design System Creator

Designed and built an open-source UI component library for Nuxt, with a strong focus on accessibility, reusability, and developer experience.

View live site

Project brief

NUED (Nuxt User Experience Design) is an open-source UI component library built specifically for Nuxt applications.

The goal was to create a lightweight, accessible set of components that developers can reuse across projects without rebuilding common UI patterns from scratch.

Problem

In many projects, developers repeatedly rebuild the same UI components, which leads to inconsistencies, accessibility gaps, and wasted effort.

While several UI libraries exist, few are Nuxt-focused, lightweight, and accessibility-first by default.

Process

I approached NUED as a design-system-style project, treating developers as the primary users.

The focus was on creating components that are easy to use, flexible, and accessible out of the box.

  • Identified common UI patterns used across Nuxt projects
  • Designed components with semantic HTML and keyboard support
  • Applied WCAG 2.2 Level AA accessibility considerations
  • Built a documentation site to showcase and test components
  • Iterated on API design to keep component usage intuitive
Accessibility as a core UX principle

Accessibility was treated as a UX requirement rather than an optional enhancement.

Components were designed with proper focus states, keyboard navigation, and semantic markup to support a wider range of users.

Developer experience

Special care was taken to keep component APIs simple and predictable.

Clear naming, sensible defaults, and flexible props were prioritised to reduce cognitive load for developers.

What I did

I handled the full lifecycle of the project, from concept and architecture to implementation and documentation.

  • Designed the component architecture
  • Implemented accessible UI components
  • Built an interactive documentation site
  • Prepared the library for public use and iteration

NUED components and documentation

Outcome

  • Created a functional, open-source UI component library for Nuxt.
  • Established accessibility as a first-class concern in reusable components.
  • Provided a consistent foundation for building future Nuxt projects faster.

Next steps

  • Expand the component set based on real-world usage.
  • Improve documentation and onboarding for new developers.
  • Encourage community feedback and contributions.
NextEcoPizza