I had some luck using AI to generate code for the Elements but the value editing is just cumbersome.
Either way, I really do hope something like Charter or Chart Bric will pop up in the Elements store one day. I think it’s pretty essential. Many companies love to see their “growth” and product sale charts on their web
I have no words . . Dan, you are magnificent !!! This is amazing. Can you include this in the next version of Elements? Will save those $49 for my PRO update later this year, then.
It would be fantastic to be able to bring in many external libraries that currently can’t be implemented in Elements due to the ban on standard colors, including the components possible with HypePro in Elements, which can be implemented without problems in other programs.
This custom component is just a fast vibe coded chart component that was thrown together, it’s not shipping in Elements 3.
Don’t be so dramatic, there’s no ban on standard colours in Elements
All we asked is that, if possible developers should always try to use the Tailwind theme colour picker as that’s what customers prefer, it makes the entire system more consistent and cohesive, and better to work with. If you simple can’t use Tailwind colours in a Component, then sure, fall back to hex colours, but that should be the exception, not the rule.
Thanks, I understand this, and it makes sense, because the user needs to use external components with the same logic as native ones.
I’ve been working on this for a while, even trying to find a script that does real-time color conversion, but I haven’t succeeded yet, at least trying to offer a convenient solution for the user.
A middle ground is to offer the standard Tailwind color tables pre-packaged with an additional option, a field for customizing the standard color.
@dan The best compromise is to create via JS the entire color set with all its variations using a dynamic color map.
like 'zinc-50': '#fafafa', 'zinc-100': '#f4f4f5', 'zinc-200': '#e4e4e7', 'zinc-300': '#d4d4d8', 'zinc-400': '#a1a1aa', 'zinc-500': '#71717a', 'zinc-600': '#52525b', 'zinc-700': '#3f3f46', 'zinc-800': '#27272a', 'zinc-900': '#18181b', 'zinc-950': '#09090b', this is just a single example, I made the color map for all colors and all variations
The only limitation of this technique is that it isn’t connected to Elements’ dynamic styles. However, it’s possible to add an additional field to enter a custom color in HTML. Is this a viable option?
This obviously only concerns color customization of external libraries that do not actively support tailwind, and this would allow for a universe of libraries
Thank you both for your interest, and I’m also pleased that you appreciate the products made with HypePro. Much depends on the freedom I have in using color conversion systems, so I’ll let you know if there’s any news.
Back to the topic - updated Table Component looks great. Maybe in the next iterations of Elements this new Chart could be included in Elements build and linked to the Table Component for data sync?
just wanted to jump in here and show you a technique that is now available when building components in Elements 3.
Tailwind 4 exposes all of the of the theme colours to you via CSS Custom Properties, so you can format a themeColor property to fetch the underlying colour from the CSS, rather than needing to hard code colour strings in your component.
Watch this and let me know if you have any questions!
I’ve been using your Chart component in my first Elements project. Everything works perfectly in Elements Preview, including the chart animations, but after exporting the site and uploading it to the server, none of the charts are visible.
It seems the Chart components may not be exporting correctly with the project. I also tried both Export Site and Publish to Folder, with the same result.
I contacted support, and Daniel recommended posting here.
Could you please take a look at your Chart component and see what might be going wrong during the export?
Thank you,
Mike
Some examples - preview from Elements all is perfect, when exported and uploaded thru Transmit, none of the Chart elements are visible.