My HTML-first, framework-agnostic implementation of shadcn/ui - franken/ui #3140
sveltecult
started this conversation in
Show and tell
Replies: 1 comment 1 reply
-
Great work! I'm using it in my current project. Although you don't have all the elements Shadcn currently have, but I'm sure you'll add them soon. Quick question, is there a way to get the code that you used for the dashboard examples? I want to use that dashboard style for my SaaS product. |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hello 👋!
A few months ago, I posted here that I'm tinkering on this idea. Now, I wanted to share my progress. I called it franken/ui, my HTML-first implementation of shadcn/ui. It's on early preview but you can already use it (if you want). I don't think I will have any drastic API change.
So, what is it? It's a Tailwind CSS plugin that is compatible with UIkit 3. To put it simply, it uses the UIkit 3's JavaScript, the design was based on shadcn, all while leveraging Post CSS and Tailwind CSS toolkit. Hence, the name 🧟♂️.
Ok, I decided to drop them all because, one of my project, it uses fully rounded corners. And another needs to look more "serious" and only uses
rounded-md
. Meaning, you can set your own styles on a per-project basis using hooks. You can even follow the original specs pixel by pixel using utility classes.I'm a backend person and I wanted to have my own go-to framework that I can pull on NPM. And I want that to be close to HTML as possible. Also, I've been using UIkit for a long time and I found shadcn design beautiful. So why not merge them both.
As I said, I'm a backend person. Remember the Bootstrap 3 days where you just reference everything via CDN? That's what I wanted to achieve with just a few extra steps now of course.
I don't like to compare but while we're at it: UIkit serves
297.88kb
and37kb
(transferred) for their CSS, franken/ui have128.78kb
and23kb
(transferred). So, no. This won't create lots of overhead because every component can be hand-picked and all media queries from UIkit are excluded by default.Yes! Just don't include the hooks and variables and that will leave you with plain UIkit 3 theme.
Yes! I'm using it inside Laravel blade, Astro, Laravel with (Inertia.js Svelte) and SvelteKit.
That is not the goal. In theory, yes. You can always try. But, it's not guaranteed.
So far, I have everything I needed for this project. The rest are least of my priority and will just serve as compatibility.
Anyway, for the docs, all you ever need to know is how to set it up, hooks list and how to use it for various customization, optimization and dark mode. The rest are just there for the "demo" and "compatibility".
Full Documentation and Demo: https://franken-ui.sveltecult.com
Repository (please give it a star 😁): https://github.com/sveltecult/franken-ui
Beta Was this translation helpful? Give feedback.
All reactions