Developers like creating frontend extensions using the Javascript UI approach because they are faster to build and easier to maintain then using Vaadin. But developers need to create their frontends from scratch or use 3rd party design system, which results in an inconsistent design, and can introduce accessibility barriers for users.  The Magnolia Design System solves this problem. 

Key Benefits 

When developers use the  Magnolia Design System, their frontend extensions will automatically get the new design of the Magnolia UI. Also, because the design system has been built for accessibility from the ground up, custom extensions will generally be barrier free by default. 

The Magnolia Design System is a collection of modern, ready-to-use UI components. It is supplied as a React software library and is used with standard frontend software development approaches. 

Key Features 

The React UI components have been meticulously crafted with a fresh design and great usability and are custom built for Magnolia and its use cases. The components follow accessibility best practices, conforming to the WCAG AA 2.2 standard, in order to be barrier free for users. For example the elements are legible and have good contrast, the UI is fully navigable using the keyboard or other non-pointer input, and they support screen readers to assist users with impaired vision. The components are extensively documented in Storybook, including code examples and tips and best practices on how to use the components. The design system works great with AI to quickly build functioning UI. It includes an MCP server which provides any AI software the complete set of documentation and usage tips. The design system has a Magnolia-friendly software license. It's free to use for any Magnolia-related software project.. 

Try it today with the Quick Start.