Show HN: Basecoat – shadcn/UI components, no React required • Hacker News Board

Re: Show HN: Basecoat – shadcn/UI components, no React required

#11

Post by gsanderson » Tue, May 13, 2025, 4:36 PM UTC

Looks great!

One suggestion would be adding a focus trap, such as when a Dialog opens. It's nice to use the tab key to move around the Dialog (inputs and buttons). Currently focus leaves to the page behind. It might be as simple as adding https://alpinejs.dev/plugins/focus#x-trap

Re: Show HN: Basecoat – shadcn/UI components, no React required

#12

Post by campak » Tue, May 13, 2025, 4:39 PM UTC

revskill wrote: post #7

pacmanche wrote: post #6

Now you just need to remove Tailwind

And then ?

and then... that solves the issue of a Tailwind dep

Re: Show HN: Basecoat – shadcn/UI components, no React required

#13

Post by diiiimaaaa » Tue, May 13, 2025, 4:55 PM UTC

So if I understand correctly all JS is custom-written Alpine JS components.

And all CSS is custom classes that use Tailwind @apply, I'm not sure why, can someone elaborate.

Re: Show HN: Basecoat – shadcn/UI components, no React required

#14

Post by boxed » Tue, May 13, 2025, 4:57 PM UTC

Can someone eli5 how this is different from something like bootstrap?

Re: Show HN: Basecoat – shadcn/UI components, no React required

#15

Post by wafadaar » Tue, May 13, 2025, 5:07 PM UTC

boxed wrote: post #14

Can someone eli5 how this is different from something like bootstrap?

Bootstrap is a completely different framework with a different design language (one that many may precieve as out of fashion). This library/framework allows folks to use ShadCN (a component library) similar to Bootstrap which is only available through React/Vue/Svelte, etc.. with vanilla HTML.

Re: Show HN: Basecoat – shadcn/UI components, no React required

#16

Post by jmisavage » Tue, May 13, 2025, 5:09 PM UTC

FYI I don't think all of your styles are loading on the page. Tried safari and firefox and it doesn't look right.

Re: Show HN: Basecoat – shadcn/UI components, no React required

#17

Post by boxed » Tue, May 13, 2025, 5:13 PM UTC

wafadaar wrote: post #15

boxed wrote: post #14

Can someone eli5 how this is different from something like bootstrap?

Bootstrap is a completely different framework with a different design language (one that many may precieve as out of fashion). This library/framework allows folks to use ShadCN (a component library) similar to Bootstrap which is only available through React/Vue/Svelte, etc.. with vanilla HTML.

So it's different in visual design, but the goal here is actually to make shadcn more like bootstrap? Hmm.. I think I like that.

Re: Show HN: Basecoat – shadcn/UI components, no React required

#18

Post by christoff12 » Tue, May 13, 2025, 5:18 PM UTC

boxed wrote: post #14

Can someone eli5 how this is different from something like bootstrap?

crayons vs colored pencils

Re: Show HN: Basecoat – shadcn/UI components, no React required

#19

Post by WilcoKruijer » Tue, May 13, 2025, 5:19 PM UTC

Very cool! Are you manually porting all components or are you using some sort of automated process?

Re: Show HN: Basecoat – shadcn/UI components, no React required

#20

Post by yawnxyz » Tue, May 13, 2025, 5:21 PM UTC

hunvreus wrote: post #8

pacmanche wrote: post #6

Now you just need to remove Tailwind

If I offer a CDN version, it will be Tailwind-free.

Yes please! Even if we have to add the tailwind as a CDN, this would be useful — as we don't have to use npm / yarn to build the project anymore.

(I like building pure html files in alpine)