You can also look into using tailwindcss if you want.
A lot of people complain that tailwind is bloated, but it's the best thing between raw CSS and a component library. It also typically tree shakes as part of a build process.
For example, not to advertise (plus it's not finished and kinda broken), but my website uses static builds of NextJS and tailwindcss. It gives me the lowest friction way to create lightweight and responsive websites.
You can do the js as a progressive enhancement on top of a CSS approach where a collapse is a hidden checkbox nested inside a label, and then differ your visible and hidden states by using :has() to see if the checkbox is checked, then your JS is just checking and unchecking based on viewport size
The only bad thing about shadcn is the dependency on radix-ui in some simple components (Aspect Ratio, Avatar, Button, Checkbox, Label, Progress, Separator, Switch, etc)
Comments
You can also look into using tailwindcss if you want.
A lot of people complain that tailwind is bloated, but it's the best thing between raw CSS and a component library. It also typically tree shakes as part of a build process.
https://darkswordsman.com/
https://proto.cool/blog/post/snippet-saturdays-image-zoom-with-checkboxes/
Now it's tailwind, shadcn, or any of the SSG templates from docosaurus, vitepress or astro.
Oh and purple gradients. So much purple gradients.
:root {
color-scheme: dark only;
}
it’s very broken if my system is in light mode
"let's take away the choice you need for accessibility because it looks bad" 😬
Did you stream data from the pds in the browser?