Are there any plans to add the ability to generate your sitemap in a more granular format? This would be a huge addition. things like being able to generate your sitemap incrementally across multiple prompts (e.g. one page group at a time instead of the whole site), or adding your open LLM API key to allow for a higher quality output or more extensive output with more pages?
I’m actually kind of impressed you guys were able to compile these and push them live yourself with the amount of type errors
@Matt @Dan kudos to the React and HTML export options now, HUGE timesaver.
Sidenote:
You really had to wait until I was done importing by hand to release this?? 😂 literally logging on the day after I publish to production to see that. Oh well.
Any plans to allow importing via TXT, CSV file? If you had a documented schema in CSV, txt, JSON, where I could import at will that would be awesome!
What I’m imagining is being able to take the source code for an old website, pasting it into GPT-4o/Claude/Gemini (probably page by page right now but eventually as a whole site), and allow it to generate an output in that schema format where it describes the old website section by section (using the title + description format you already use), then being able to generate a fresh site and export to React/HTML.
E.g. old bloated Wordpress site -> crawl and describe in documented schema format -> import -> build sections/wireframe in Relume site builder -> export to HTML/React.
That would be awesome. Sucks for the below-average bootcamp Wordpress devs who have saddled SMB’s across the globe with subpar websites, but awesome for everyone else fixing their mess.
(The workflow I described would be the manual option. The upgraded version would be automating this with an OpenAPI Schema that links directly to a Relume import)
I don’t suppose there’s any way we can get some global QoL files for the React Library?
Global type files, prop files, barrel files, etc would all be massive for such a large library.
Also, if you guys would task an intern with taking the time to add code flags to the places where you’re adding types, props, return function, etc it would make global programmatic editing much easier since those can be standardized and searched for when scripting. Otherwise with different component structures I’m having to try and string together a frankenstein API script using the typescript compiler that hurts my brain.
My end goal is am trying to neatly link all the components to a headless CMS like Payload, only issue is I’m trying to do it programmatically, hence all the global edits. Probably a dumb workflow, but 1300 unique components in a headless CMS that are ready to go adds a lot of capabilities for automated content marketing
“React library is production stable”
lol my linter would disagree.
Also,
I find it funny that Relume uses “alternative” in their tailwind config for the background colors.
The typical most used name for that variable would be “alternate” in my eyes lol, every time I see it I think of nickelback now
1440px is the most common desktop size in the U.S. so just a preference I guess
The color variables are HORRIBLY thought out. I’m having to go back and fix them which is tedious and defeats the point of a headless block library which I am supposed to be able to use in conjunction with my global color variables for faster development.
The button variants are laughably bad with how they are integrated with the color variables. They are literally inaccessible from a color standpoint just using the default implementations.
Was there zero Q/A done before release? These are day 1 issues that a junior can fix.
You also have zero written documentation on the color variables. Everything I have had to comment myself to understand it.
The library’s layout for its components is great but I am shocked how incompetently designed the color variables and button colors are in general.
You also have differently structured import statements for each component, making fixing the file paths to go from your obfuscated node module button component to my fixed manual one even more tedious.
I’m sure you never intended anyone to actually download these in bulk and attempt to use all 1400 components.. that’s probably why you are heavily obfuscating all of your code both in your node modules distribution and on your website’s front-end. It was pretty trivial to remove all of the spans you wrap around your code in the HTML, but come on, really guys? You surely know you can render different components based on logged in state, why not give logged-in paid users the ability to get the components via API/programmatically? Leave the obfuscation for the free tier/not logged-in users. One of your big selling points is how big your library is, yet you actively attempt to restrict users to only manually copy and pasting?
You started out so well and I was so hyped to use this library, then I realize I have to copy/paste each one individually, all of the color variables are fucked under the hood, the global container horizontal padding is a pain to fix globally and requires manual revisions if you want to customize, there is zero documentation on some of the most crucial aspects, and if you do want to fix the UI elements manually, the import paths are all structured slightly differently, meaning you have to do 4-5 replace searches for each UI primitive, instead of just one. Which adds up when you are having to fix the colors of EVERY UI primitive, since they were fucked from the start. You literally have 4-5 of the colors in your example tailwind config that are flat-out not used in a single component, and another 2-3 color variables are only used in like 50 components combined. Meaning you have 1250-1300 components integrated with like 3-4 color variables. Great for wire framing in just a couple of colors, horrible for building a production site with color variables as the basis.
Add on top of that the 40-50 components that are plain inaccessible and show errors when you click them in the dashboard.
Sigh, yet another component library fallen to enshittification.
Here’s a hint, the AAA gaming studio model of releasing alpha versions into production and having your users be paid testers, is not a winning strategy to emulate.
I am more than happy to be a paid Q/A tester if you offer, but unpaid you can forget it. Putting this out there so anyone else wanting to use this library in production can understand the work that will need to go into it before it’s ready.
It’s definitely a quality library, but there’s clearly some decisions being made behind the scenes hampering it. Whether from the CEO/founders or someone else (maybe P.E. backers?). These fixes are too trivial to assume they come from incompetence, there is something else causing them.
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:
text-background-primary
, is this indicating the text color used for that background, or is it specifying the text color itself?text-background-foreground
clearly indicates the text color for foreground elements on the default background. Similarly, text-foreground
refers to the default foreground color.brand
, in globals.css
, and under neutrals
). Likewise, backgrounds, primaries, and alternatives are spread across various areas.container
class, but additional styles often interfere.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.container
class effectively controls component padding, reducing the need for individual customizations.npx create-relume-payload-app
could quickly spin up a pre-configured project with React components and types/fields set up.npx add-all-from-relume_ui
to install all components in one go.some of the ones off the top of my head affected by these are the stats, multiform, tables, and a couple of the navbars.
if you go in the component repo and use a simple grep command to search for all components that do not have a default export, it will show the access denied ones. as for the improperly ordered ones, I only found those out when I bulk imported the components and attempted to create a barrel file, the IDE threw errors related to the filepaths since they didn't match the numbering of the exported constant from the file. this flagged since I was numbering the file names off the url path which should've matched the constant but didn't.
Just FYI, about 20-30 of the react components are ordered improperly (titled navbar 12 or similar with navbar13 as the constants/type names for example), or they have 'access denied' errors and aren't showing their code at all
just wanted to shout you guys out for the awesome work with Relume, just the whole team in general. You guys have finally 'cracked' the code in a sense, of being able to offer a UI library that is truly fit for production and helps speed up development. My usual process to customize components and add props is a typical headache of making them from scratch or using a pre-built library like TailwindUI, Flowbite, Mantine, etc. However those libraries (and really all UI libraries I've interacted with besides Relume to this point) are too heavily opinionated with their design. If I am having to strip out a bunch of Tailwind classes and add my own, then add my own props, then fix any visual bugs/issues that my specific customizations cause along the way, it quickly becomes faster to just write them from scratch. The alternative to this point has been creating a personal UI block library, but it rarely comes out as good as something like Relume when it comes to design consistency. It is very difficult for one person to ensure the design is cohesive across the board, with clean typing and props, with enough default styling to wireframe off of, but not so much that it becomes overly opinionated. It's clear that a lot of thought has gone into the product so I just wanted to say thanks! It's not easy to build something that is actually helpful. Much easier to build something semi-helpful/faux-helpful, and let your marketing create pretty content to pull people in, and ignore the underlying product need for the customer. That seems to be the general trend nowadays, to hook people in with over-exaggerated claims and cherrypicked demos, just to get them to sign-up for a subpar product behind the scenes. I was actually very surprised how clean and easy to use the Relume components and UI is, which says a lot considering I've personally used pretty much every headless component/block library out there (tailwindUI, flowbite, mantine, skeleton.dev, carbon design, material design, chakra ui, next ui, meltUI, shoelace, etc the options are endless) and your product easily comes out on top, and it isn't even close. You're doing a great service with your product that is actively helping me get my product to market much faster, so THANK YOU.