starwind-ui

开源

shadcn/ui for Astro。49 个动画化且可访问的组件。通过 CLI 安装。拥有代码。

684 stars0 点赞2 次浏览

工具介绍

shadcn/ui for Astro。49 个动画化且可访问的组件。通过 CLI 安装。拥有代码。

**Astro-first, 可自行拥有的框架可移植的 UI 组件。**Starwind UI 为您提供了易于使用的、采用 Starwind/shadcn 样式的人机工程学的 Tailwind CSS 组件,并由一个可移植的运行时提供支持,该运行时目前支持 Astro、React 和 Vue 3.5 测试版的适配器。

** Own Your Code** — 样式化组件存放在你的项目中,你可以理解和自定义它们。 - ✨ 默认支持动画 — Tailwind CSS v4 可提供流畅、精致的动画效果。 - ♿ 可访问 — 可通过键盘导航和屏幕阅读器使用。我们在开发时就考虑到了 a11y。 - 可移植的运行时 — 与生成的 Astro、React 和 Vue 3.5 测试版适配器共享 DOM 行为。 - ️ CLI 驱动 — 只添加你需要的组件,使用简单的 npx starwind add 命令即可。

bash

npx starwind@latest add

Vue 3.5 测试版

在 Vite Vue、Astro Vue、Nuxt 3 或 4、搭载 Inertia Vue 的 Laravel 或 Quasar Vite 中尝试公开测试版 SPA/SSR 项目:

bash

npm install @starwind-ui/vue@beta vue@^3.5
npx starwind@latest init --framework vue

Vue 适配器使用习惯性的 v-model 参数,匹配 update:* 事件,以及正常的详细信息。事件监听器。Styled Image 组件仍然是 Astro 专属。Vue API 在开发过程中可能会发生变化。 0.x 系列。请在 Starwind UI 问题跟踪器。

运行时架构

Starwind 组件使用由共享、框架中立的运行时支持的框架适配器。

mermaid

flowchart TD
  App["Your application"]
  Components["Starwind components you own
Tailwind CSS + framework markup"]
  Adapter["Framework adapter
Astro, React, or Vue 3.5 beta"]
  Runtime["Starwind Runtime
shared accessible behavior"]
  Browser["Browser APIs and the DOM"]

  App --> Components
  Components --> Adapter
  Adapter --> Runtime
  Runtime --> Browser

请参阅可移植运行时了解 c