My HTML-first, framework-agnostic implementation of shadcn/ui - franken/ui

[sveltecult]

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 🧟‍♂️.

But, this does not look like shadcn/ui. Where are the rounded corners? The shadows? And the font sizes, they are all different!

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.

Why do this?!

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.

But we already have ports for React, Vue and Svelte?!

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.

You are fusing two frameworks, that will give me lots of overhead!

I don't like to compare but while we're at it: UIkit serves 297.88kb and 37kb (transferred) for their CSS, franken/ui have 128.78kb and 23kb (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.

Can I remove the shadcn?

Yes! Just don't include the hooks and variables and that will leave you with plain UIkit 3 theme.

Can I use it inside React, Vue or Svelte?

Yes! I'm using it inside Laravel blade, Astro, Laravel with (Inertia.js Svelte) and SvelteKit.

My project uses UIkit, is it fully compatible?

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

[praveentelu]

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.

[sveltecult]

Thanks, we'll slowly getting there.

For the code you mean this? https://github.com/sveltecult/franken-ui-site/blob/master/src/pages/examples/dashboard.astro but that's an astro code. You can control + u and copy paste the code you need https://www.franken-ui.dev/examples/dashboard

[ShayanAliProgrammer]

Great work

[ArielMejiaDev]

@sveltecult I am pretty curious how do you transform your svelte repo project into a cdn minified version of the library, I am a Laravel developer too, so asking a quick question, I have a few idea about Astro, could you reference a good site to learn a little bit about it

Great project Congrats

[sveltecult]

Hello @ArielMejiaDev

You can explore this repo: https://github.com/sveltecult/franken-ui-releases inside the folder "themes" you'll find the 12 css files and corresponding tailwind.config.js for each of them. Because UIkit is prefixed with uk-*, it's just a matter of "safelisting" all the pattern and voila, you'll get all the UIkit classes.

For Astro, the docs site is the best way to learn it and watch a bunch of random YT vids. But really, if you know JSX, you will learn Astro, too.

Best of luck. :)

[ArielMejiaDev]

Thanks @sveltecult

Quick question where do you learn to transform the current svelte project into a cdn it is pretty interesting

[tchafack]

❤️

[laotoutou]

I love it!

[fkabreiddy]

Thanks sm, I was looking for some implementation to use it on my blazor app ❤