Improving CSS Theming, Padding Control, and CMS Integration Options
Suggestions for Improvement 1. Global Variable Theming Documentation The CSS variable theming works well, but the documentation could be improved. It's not always clear which blocks the variables are attached to. Some questions I had include:
Naming Conventions: Are your CSS variables purpose-based (similar to Shadcn) or declarative? For example, when I use text-background-primary, is this indicating the text color used for that background, or is it specifying the text color itself?
In Shadcn, text-background-foreground clearly indicates the text color for foreground elements on the default background. Similarly, text-foreground refers to the default foreground color.
In your case, multiple black-and-white defaults appear in different places (e.g., in the config under brand, in globals.css, and under neutrals). Likewise, backgrounds, primaries, and alternatives are spread across various areas.
Recommendation: Consider reviewing the naming conventions. Improving them could be as simple as using regex for a global search-and-replace. By establishing a clearer naming convention and spinning up a dedicated documentation page, this change could be completed in a day or two and significantly benefit users. While it may not be the definitive solution, it’s worth exploring if others share similar concerns. 2. Global Horizontal Padding Editing global padding for components can be messy. Many components are wrapped in a global Tailwind container class, but additional styles often interfere. Issue: If I want to change the horizontal padding of all components from 1.5rem to 2.5rem, the logical approach would be to modify the global container class. However, due to the way components are structured, this change doesn’t propagate cleanly. Instead, users end up adding custom padding to each component manually. Recommendation: Consider streamlining global padding adjustments. Ensure the global container class effectively controls component padding, reducing the need for individual customizations. 3. CMS Pre-Integration and Bulk Download Options Your library of headless CMS components is excellent, but integrating them can be time-consuming. Suggestions:
- 1.
Pre-Configured Starter Demos:
- 2.
Provide starter demos for popular CMS systems (e.g., Sanity, Payload) with your components pre-linked and ready to use. A command like npx create-relume-payload-app could quickly spin up a pre-configured project with React components and types/fields set up.
- 3.
Bulk Component Syncing:
- 4.
Instead of syncing headless components individually, offer a bulk download option:
Programmatic Syncing: A command like npx add-all-from-relume_ui to install all components in one go.
Zip File Downloads: Provide bulk downloads as zip files, similar to how Flowbite handles it.
Long-Term Benefit: While it may be a short-term headache for the dev team, these changes would save users a lot of time and improve efficiency. Integrating this with your style guide builder would allow users to access pre-configured components with brand styling ready to use in their CMS of choice.
