How about a framework-agnostic shadcn-ui?

[sveltecult]

Is this for you? Let's find out 🤔

Let's start with the WHY

Because I just want to have my own go-to framework with beautiful UI out of the box.

What is this:

This is a Tailwind CSS plugin. First phase of the development was to expose UIkit classes as a tailwind plugin so I can make its JavaScript work. It's a great and mature UI framework that works on React, Svelte, basically anywhere because it is framework agnostic.

Whose this project is for:

1. For teams who have limited resources, not using react or ports (shadcn-svelte), etc
2. For people who just want to pull it to NPM and start working
3. For small-time developers (like me) or individuals who do not have their own designer
4. For people who want a truly copypastable components or pages
5. For server-sided people (like me)

Features

1. Works with UIkit JavaScript
2. Easier dark mode.
3. Accessible
4. Framework-agnostic. Works anywhere.
5. Way slimmer than UIkit because we are leveraging purge css.
6. No more SASS or LESS build tooling needed.
7. Intellisense works out of the box.

How

Once it is published, all you need to do is import and list as your tailwind plugin on your tailwind.config.js file. Define the components you needed and you can even optionally customize components via hooks. You can even customize the entire framework using the theme option and it will use shadcn's "violet" scheme.

plugins: plugins: [
    uikit({
      theme: 'violet',
      components: {
        accordion: {
          hooks: {
            "hook-title": {
              background: 'pink'
            },
            "hook-title-hover": {
              textDecoration: 'none'
            },
            "hook-content": {
              background: 'green'
            }
          }
        },
        alert: {},
      },
    }),
  ],

Components

Important components that are working are:

1. Modals - For dialogs
2. Notification - For toasts and alerts
3. Forms - Inputs are Customizable via theme-[name] class while radio, checkboxes need to be "compiled" using the "theme" option.
4. Offcanvas - For drawers, sheets
5. Drop, Dropdowns, Tabs and Subnav - For menus and popover
6. Sliders - For carousel
7. Iconnav - For Toggle Group
8. Badges, labels - For important notes and highlights
9. Scrollspy - Useful for documentation sites (see demo for action)

Basically, almost every UIkit components are working.

Caveats

1. Custom selectboxes and Datepicker will not be supported. My goal is to have a truly copypastable code, components, and pages.

FAQ

• Can I use it on existing projects that use UIKit - Initially, that was my plan. But down the line, some components are striped and heavily modified. So, I don't recommend it.
• Is it customizable? - Hooks are available for some components if you want basic customization. If you want heavy customization, you should not use this library.

When:

Not sure yet. Currently, I've been experimenting/porting with this full time since last year and it worked. I would love to release it this year. But because I do not have a job at the moment and will run out of resources, I am thinking to release this initially as a sponsorware. If you think this project will help you or your team, please reach out via mail sveltecult[at]proton[dot]me. Once stabilized and documentation is ready, I'll send it.

Please note that I'm just an independent dev and just a fan of the framework and not in anyway associated with Svelte brand.

Short Demo

2024-01-12.08-08-14.mp4

[lord007tn]

we have

• shadcn-vue
• shadcn-svelte

and everyone has some unique implementation for a specific framework
I believe that shading is a powerful tool where we can support many components and ideas but having every community port their own at their own pace is problem when people want to change frameworks ( like myself from next to Vue)

I believe having a monorepo where all shadcn framework implementation lives in and is updated together and where we also merge the community power is better for long-term maintainability

[rocklau]

shadcn/ui htmx