Shark

现代化、可访问、设计精美的UI组件。

构建于 Ark UI 和 shadcn 之上，它包含了样式、变体和结构的合理默认值，因此你可以将组件直接放入项目，而无需从头开始。这不是一个黑盒框架；你拥有代码，可以调整你需要的内容，并建立在已经经过深思熟虑的基础之上。

这个名字融合了它所基于的两个项目：sh 来自 shadcn，以及 ark 来自 Ark UI。Shark。

动机

Ark UI 提供了一套广泛的无头组件，是 Radix Primitives 和 Base UI 的直接替代品。它为你提供了可访问的原语和状态管理，但将样式和布局完全留给你。另一方面，shadcn 提供了复制粘贴的组件，看起来很棒。差距在于 Ark 的文档没有展示如何将其原语与 Tailwind 配对，或者如何将它们转化为可安装、主题化和扩展的可复用设计系统。

工作原理

不仅仅是从 npm 安装包并导入不透明的组件，而是将源代码保留在仓库中，并与你的应用一起修改。这绕过了当默认值不够时常见的包装器、样式覆盖和 API 不匹配的问题。

这种方法，即你保留并拥有源代码，意味着：

• 完全透明： 你可以看到每个组件的构建方式，你和实现之间没有隐藏层。

• 易于定制： 调整组件的任何部分以匹配你的设计和功能；你编辑源代码，而不是绕过包的 API。

• AI 友好的工作流： 因为代码存在于你的仓库中，LLM 和团队成员可以阅读、推理并帮助改进组件，而无需逆向工程库。

AI 就绪

该库的设计使得人类和 AI 工具都能平等地依赖它。组件编写得清晰、可读、可预测，以便助手能够理解结构、推理更改并减少猜测地修改文件。

由于源代码位于你的仓库中，具有可检查的实现和一致的组件间模式，模型获得了端到端读取 UI 层所需的上下文。助手可以了解你的组件如何工作，提出重构或小修复，或生成与现有令牌、布局和约定匹配的新组件。

import { CirclePlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";

const ButtonDemo = () => (
  <div className="flex flex-wrap gap-2">
    <Button variant="outline">Button</Button>
    <Button size="icon-md" variant="outline">
      <CirclePlusIcon />
    </Button>
  </div>
);