Make all components copy/paste with npx like shadcn/ui

[royeradames]

Crazy idea incoming.

Why not simplify installation and potentially performance by just having the components being able to down load through an npx scrip like https://ui.shadcn.com does.

For example:
npx shadcn-ui@latest add carousel
would be something like
npx shoelace@latest add carousel

This can potentially give support for all frameworks and meta framework.

I would like to start the discussion.

1. What would be the blockers?
2. Does the benefits or potential benefits out weight the work load?

[claviska]

What would those commands do exactly?

We don't have the most reliable analytics, but it seems like most of our users prefer the CDN + autoloader. However, our npm users currently do npm install @shoelace-style/shoelace and simply import whatever components they want to use in their apps, typically by copying/pasting the imports from the docs, e.g.

import '@shoelace-style/shoelace/dist/components/button/button.js';

A CLI interface adds more complexity for us to build/maintain and I'm struggling to see what problem it solves.

[royeradames]

Let me test this out.
The thing about this is that it works fine on vanilla html, css, javascript but when you start using metaframework like next.js we run into issues.

I try importing the components but I continuing to get errors, and my IDE doesn't know how to correctly import the components so I been stuck doing them manually.

[royeradames]

So I try both an I'm getting import errors

[royeradames]

I was able to find a work around

But I'm not a fan of not getting type safety and js docs for the component props.

[royeradames]

To fix the type issue we have to configure ts to be able to find the types.

While I like how the tag looks like standard HTML tags. I don't like how I cannot get the TS props options menu from opening.
I notice how Webstorm IDE is importing from /CDN instead of /dist. This fixes my issues with npm package so I can use that instead

[KonnorRogers]

In my opinion, ShadCN is a fundamentally different library.

ShadCN has a CLI because its a "component generator" whereas Shoelace is a "component library". The difference is that ShadCN scaffolds your components for you and isn't directly importable. Shoelace however has directly importable modules and there's nothing for you to scaffold on your own.

By adding a CLI, it makes flexibility harder because it would need to write those import statements to the top of your entrypoint, we dont know where your entrypoint lives, so then we would need a shoelace-components.json configuration file, which adds yet more complexity.

Adding an import statement to the top of your entrypoint seems to be the same amount of work as running an npx command.

[royeradames]

I coming at the point of view of shoelace is saving me for remaking the same select component

or any standard components we use in web development that the standards HTML input are lacking in customizability. Think of Select and Dialog. It takes them to long to bring things up to standard
if I can have the component in my repo, I don't mind. I was going to do so anyways. So what are the benefits for me? Well it becomes part of my code. Now I can extended the component and add things that I think would make it a better experience for me. Is more like using shoelace has a template that I hopefully get to edit very little and just focus on customization. There is just so many ways to do a select.

This open the opportunity that if I notice the SlSelect option is missing the aria-current="true" so that it matches the same pattern of aria-selected="true" I can just add it. Move at the speed of my project, and I have less roadblocks to create a pull request for the shoelace repo.

Doing this with npx or the CLI would just be a clean way of doing so. It would feel like the best of Angular but its good enough if I can just copy and paste the code into my repo ( I haven't been using a CLI for React or Next.js).

The thing is that we need a deeper understanding of shoelace before doing this and the type investment and the learning curve is deep. If I had to moved quickly I would had moved to Radix.UI, even do I'm firing that hard.

[tamara-nexus]

If I may add to this conversation, this is what actually drew our attention to Shoelace (vs shadn or Flowbite). That the components are not copy paste code but rather encapsulated components (structure, purpose, events...) and that they are built once (using Lit) which ensures consistency across frameworks e.g. Vue version does not have missing elements that are only available in React or items that look different in e.g. Java vs React vs Angular (which was the case in PrimeFaces).