Migration of the Admin UI from Clarity to Tailwind

[dlhck]

Summary

This RFC proposes the migration of the Vendure Admin UI from Clarity to a Tailwind-based component library for the upcoming major release, Vendure v3. The goal is to create a modern, highly themable interface and to enable seamless plugin integration for both Angular and React.

Background

The current Admin UI, refreshed with Vendure v2, retained much of its original structure and relies on Clarity. While functional, it lacks the flexibility and modern aesthetic that we aim to achieve.

Motivation

• Modern Design: Tailwind CSS will allow us to build a minimalistic black/white/vendure blue theme, with extensive theming capabilities.
• Component Flexibility: Tailwind’s utility-first approach aligns with our goal to create a highly customizable interface.
• Community Integration: Using Tailwind will enable our community to build plugins with admin UI extensions that integrate seamlessly, using the same styles and components.
• Framework Compatibility: As Tailwind is framework-agnostic, we can provide the same components for both Angular and React

Detailed Design

Component Library

We propose using a Tailwind-based component library. Specifically, we have identified Spartan as a suitable project, as it provides a comprehensive set of components using Angular CDK.

Theming and Customization

• Default Theme: A minimalistic black/white/Vendure blue theme.
• Custom Themes: High degree of customization through Tailwind’s utility classes and configuration files.

Framework Compatibility

• Angular: Components via Spartan, utilizing Angular CDK.
• React: Components via Shadcn, ensuring consistent design and behavior.

Plugin Integration

Plugins with admin UI extensions should be able to utilize the new component library, ensuring a seamless look and feel.

Benefits

• Improved User Experience: A modern, clean interface enhances usability.
• Enhanced Customization: Tailwind’s flexibility allows users to create unique, branded experiences.
• Community Contributions: Easier for developers to contribute plugins and extensions, fostering a vibrant ecosystem.

Alternatives

• Continue with Clarity: Retaining Clarity would avoid migration costs but limit modernization and customization capabilities.
• Other CSS Frameworks: Other frameworks like Bootstrap or Foundation were considered but do not offer the same level of utility-first design and flexibility as Tailwind.

Adoption Strategy

1. Planning: Define a detailed migration plan with milestones.
2. Development: Incrementally rebuild components using Tailwind and Spartan.
3. Testing: Extensive testing to ensure feature parity and stability.
4. Documentation: Update documentation to assist developers with the new setup.
5. Community Involvement: Engage the community through previews and feedback sessions.
6. BC Layer: Include a plugin that enables a BC-layer, especially for styles of components in custom plugins

Unresolved Questions

• Timeline: Establish a concrete timeline for the build.
• Community Feedback: Gather input on the proposed changes and adjust plans accordingly.

Conclusion

Migrating the Vendure Admin UI from Clarity to a Tailwind-based component library will modernize the interface, enhance customization, and foster a robust plugin ecosystem. This strategic shift aligns with our vision for Vendure v3, making it a state-of-the-art digital commerce management platform, that also shows its superpowers in the Admin UI, not only in the code.