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.
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
Planning: Define a detailed migration plan with milestones.
Development: Incrementally rebuild components using Tailwind and Spartan.
Testing: Extensive testing to ensure feature parity and stability.
Documentation: Update documentation to assist developers with the new setup.
Community Involvement: Engage the community through previews and feedback sessions.
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.
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
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
Framework Compatibility
Plugin Integration
Plugins with admin UI extensions should be able to utilize the new component library, ensuring a seamless look and feel.
Benefits
Alternatives
Adoption Strategy
Unresolved Questions
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.