https://tszlznlchannel.pages.devhttps://tszlznlchannel.pages.dev/posts/329https://tszlznlchannel.pages.dev/posts/329Sun, 12 Apr 2026 21:21:45 GMT<a href="/search/result?q=%23%E4%BC%98%E8%B4%A8%E5%8D%9A%E6%96%87">#优质博文</a> <a href="/search/result?q=%23CSS">#CSS</a> <a href="/search/result?q=%23Astro">#Astro</a> <a href="/search/result?q=%23%E5%89%8D%E7%AB%AF">#前端</a> <a href="/search/result?q=%23%E7%BB%84%E4%BB%B6%E5%BA%93">#组件库</a><br /><a href="https://bearnie.dev/docs/" target="_blank">Bearnie <mark>组件库</mark></a>：基于 Astro 和 Tailwind CSS 且严格遵循 WCAG 2.1 AA 标准的无障碍组件，看着蛮有意思的，Astro 界的 Shadcn 的感觉。<br /><br /><div> <div>AI 摘要：Bearnie 挑战了传统的 npm 包组件分发模式，提倡将组件源码直接复制到项目中。它专为 Astro 构建，不依赖 React 或 Vue 等前端框架运行时（Runtime），而是采用原生 JavaScript（Vanilla JS）实现交互。其核心优势在于开发者拥有 100% 的代码控制权、零框架负担、内置无障碍支持（Accessibility）</div> <span>Expand hidden content</span> </div><a href="https://bearnie.dev/docs/" target="_blank"> <div>Bearnie</div> <img class="link_preview_image" alt="Introduction | Bearnie" src="/static/https://cdn4.telesco.pe/file/vX5z-eDY4LBTGZumPqhLMup6KZYm4Wq34Yxj38tGS__kykDTFFxY5CIhcgRMnSnVOGPypbRqChaDCtOMAcHNUsjrPkE8U8nUMhdMLoAvWrDQJux1bdxiRXRtNNz_zVL7BnZ14aSjRhTxtOMCOCg8UYXlIRKKr0wVqkhwyYDOeh20V5ZS3TWQltCBBc0rT9dY1vDthMeC8hLej9Zqi7hzfzkUMRwEv3yLV7fBWvqIgCnu9KD8V9aKvsejzdjcwyzwCTOVS3tIkiYsRpLfxrWZtISaFi8Ofo-H7KVaLgApfBHCXlRO03Hx1b4qgyK30TbDxdSvFucHQWXHJydBHiv2SQ.jpg" width="1200" height="630" loading="eager" /> <div>Introduction | Bearnie</div> <div>This is not an Astro component library. It's how you build your Astro component library.</div> </a>