ark

Ark UIは、Chakra UIチームによってメンテナンスされているオープンソースのヘッドレスコンポーネントライブラリです。デザインシステムやウェブアプリケーション構築のためのスタイルなしのロジックとアクセシビリティレイヤーを提供し、視覚的なスタイリングはすべて開発者に委ねられています。 **コアアプローチ** このプロジェクトは、コンポーネントの動作と外観を分離しています。すべてのコンポーネントにデフォルトスタイルが適用されていないため、チームはTailwind、Panda CSS、EmotionやStyled ComponentsなどのCSS-in-JSソリューション、CSS Modules、またはプレーンなCSSを適用できます。その目的は、テスト済みのインタラクションとアクセシビリティ動作を継承しつつ、デザインシステム作成者にプレゼンテーションの完全な制御権を与えることです。 **アーキテクチャ** コンポーネントロジックはZag.jsの有限ステートマシンに基づいて構築されています。READMEによると、これにより予測可能で型安全な状態遷移、容易なテストとデバッグ、およびエッジケースの削減が実現します。同一のコンポーネント動作がReact、Solid、Vue、Svelte向けの個別のパッケージを通じて提供されるため、ロジックを書き直すことなく、フレームワーク間で一つのAPIサーフェスを共有できます。各パッケージはTypeScriptで完全に型定義されています。 **アクセシビリティ** READMEでは、コンポーネントがWAI-ARIAデザインパターンに従い、支援技術でテストされていることが述べられています。適切なARIA属性とロール、キーボードナビゲーション、フォーカス管理、スクリーンリーダーへの通知、およびRTL（右から左へ読む言語）サポートなどの機能が備わっています。 **コンポーネント** Ark UIは、概ね以下のようにグループ化された45以上のコンポーネントを提供しています： - レイアウトとナビゲーション: Accordion, Tabs, Splitter, Steps, Tree View, Tour - オーバーレイ: Dialog, Popover, Tooltip, Hover Card, Bottom Sheet, Floating Panel - フォームと入力: Checkbox, Radio Group, Select, Combobox, Number Input, Pin Input, Tags Input, Editable, File Upload, Color Picker, Date Picker, Password Input, Signature Pad, Slider, Angle Slider, Rating Group, Switch, Toggle, Toggle Group - データ表示: Avatar, Highlight, Progress, QR Code, Format, JSON Tree View, Marquee - ユーティリティ: Carousel, Clipboard, Collapsible, Field, Fieldset, Menu, Pagination, Portal, Presence, Scroll Area, Segment Group, Timer, Toast, Client Only, Download Trigger, Focus Trap, Frame, Collection, Listbox **インストールと使用方法** フレームワークごとに専用のnpmパッケージ（`@ark-ui/react`, `@ark-ui/solid`, `@ark-ui/vue`, `@ark-ui/svelte`）が用意されています。コンポーネントは `@ark-ui/react/dialog` のように個別にインポートされ、Root, Trigger, Backdrop, Positioner, Content, Title, Description, CloseTriggerなどのプリミティブから構成されます。READMEでは、4つのフレームワークすべてでほぼ同一のマークアップでレンダリングされるDialogの例が示されています。 **エコシステム** Ark UIはChakra UI v3の基盤となっており、READMEではその上に構築されたスタイル付きコンポーネントセットとしてPark UIやTark UIについても言及されています。また、個別のintegrationsフォルダでは、AI支援開発のためのMCPサーバーが提供されています。 **ドキュメントとコミュニティ** ガイド、コンポーネントごとのAPIリファレンス、例、およびスタイリングレシピは ark-ui.com で公開されています。プロジェクトにはDiscordコミュニティ、機能リクエストのための公開Cannyロードマップ、およびブログがあります。コントリビューションはコントリビューティングガイドを通じて受け付けられており、サポートはドキュメント、Discord、GitHub Issuesを通じて提供されています。開発はOpen Collectiveを通じて資金提供されており、プロジェクトはMITライセンスの下でリリースされています。