現代化、無障礙、設計精美的UI組件。
建立在Ark UI和shadcn之上，它包含了合理的預設值，用於樣式、變體和結構，因此你可以直接將組件放入專案中，而不必從頭開始。它不是一個黑盒子框架；你擁有程式碼，調整你需要的部分，並建立在已經經過深思熟慮的基礎之上。
這個名稱融合了它所基於的兩個專案：來自shadcn的sh和來自Ark UI的ark。Shark。
動機
Ark UI提供了廣泛的無頭組件，並作為Radix Primitives和Base UI的直接替代品。它為你提供無障礙的原語和狀態管理，但樣式和佈局完全由你決定。shadcn，另一方面，提供了看起來很棒的可複製貼上組件。差距在於Ark的文檔沒有展示如何將其原語與Tailwind配對，或者如何將它們變成一個可安裝、可主題化和可擴展的可重用設計系統。
運作方式
與其只從npm安裝套件並導入不透明的片段，你可以將原始碼保留在儲存庫中，並隨著應用程式進行修改。這樣就可以避免當預設值不足時，常見的包裝器、樣式覆蓋和API不匹配的惡性循環。
這種保留並擁有原始碼的方法意味著：
完全透明：你確切地看到每個組件是如何構建的，在你和實作之間沒有隱藏層。
輕鬆自定義：調整組件的任何部分以符合你的設計和功能；你編輯原始碼，而不是繞過套件API。
AI友好的工作流程：由於程式碼位於你的儲存庫中，LLM和團隊成員可以讀取、推理並幫助改進組件，而無需對庫進行逆向工程。
AI 就緒
該庫的設計使人們和AI工具都能同樣依賴它。組件的編寫保持清晰、可讀和可預測，以便輔助工具能夠理解結構、推理變更，並以更少的猜測來修改檔案。
由於原始碼位於你的儲存庫中，具有可檢查的實作和組件間一致的模式，模型獲得了從頭到尾讀取你的UI層所需的上下文。輔助工具可以了解你的組件如何運作，提出重構或小修復，或生成符合你現有token、佈局和慣例的新組件。
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>
);