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.
Show HN: Basecoat – shadcn/UI components, no React required
71–79 of 79 posts
Re: Show HN: Basecoat – shadcn/UI components, no React required
#72Looks 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
Yeah, I looked into it but wanted to avoid adding plugins. I already do a bit of (simple) focusing here and there, so it shouldn't leave the focus on the background: https://github.com/hunvreus/basecoat/blob/main/src/js/dialog... But more complex scenario require you to be specific about the field you want to see focused. I was thinking about allowing you designate the field to focus on. What would you suggest?
Re: Show HN: Basecoat – shadcn/UI components, no React required
#73Re: Show HN: Basecoat – shadcn/UI components, no React required
#74Earlier quoted context omitted.
I'd say anything new in 2025 that involves working with the DOM that doesn't use web component is a waste. Lately I have been porting some old JS libraries (7+ years old) that still are visually impressive to web components, and in my experience after porting some libraries there is about 30% fewer lines of code. Before web components there was so much work to get things up and running in the DOM. Alpine.js does this…
I've been using RiotJS when I need partial component support - wasn't an all-in thing like React ; and I thought HTMX and Alpine are also good for these partial upgrades. Maybe WebComponents are fully supported now? (I can't keep up)
Re: Show HN: Basecoat – shadcn/UI components, no React required
#75Earlier quoted context omitted.
Yeah, I looked into it but wanted to avoid adding plugins. I already do a bit of (simple) focusing here and there, so it shouldn't leave the focus on the background: https://github.com/hunvreus/basecoat/blob/main/src/js/dialog... But more complex scenario require you to be specific about the field you want to see focused. I was thinking about allowing you designate the field to focus on. What would you suggest?
Why aren't you just using the built-in dialog element that already handles this?
I tried really hard to use and popover but didn't succeed. Maybe somebody more skilled can make it happen.
Re: Show HN: Basecoat – shadcn/UI components, no React required
#76Re: Show HN: Basecoat – shadcn/UI components, no React required
#77I’m so pumped to try this out!!!
Re: Show HN: Basecoat – shadcn/UI components, no React required
#78I’m moving from react to wordpress and I could not be happier that I discovered this today I’m so pumped to try this out!!!
Please do let me know if things aren't working as expected, I want to make this a great alternative to anything else out there: https://github.com/hunvreus/basecoat/issues
Be brutally honest.
Re: Show HN: Basecoat – shadcn/UI components, no React required
#79This looks awesome. Thanks a lot!