Ark UI - 4つのフレームワークで使えるヘッドレスUIライブラリの決定版

はじめに

フロントエンド開発をしていると、「このプロジェクトはReactだけど、次はVueで」みたいな状況って意外とあるんですよね。そのたびにUIライブラリを一から学び直すのは正直しんどい。

そんな悩みを解決してくれるのがArk UIです。

Ark UIは、React、Vue、Solid、Svelteの4つのフレームワークに対応したヘッドレスUIコンポーネントライブラリ。Chakra UIの開発チームが手がけていて、GitHubスターも4,900以上を獲得している注目のプロジェクトです。

個人的には「フレームワークが変わってもAPIが同じ」というのがかなり刺さりました。

特徴・メリット

1. マルチフレームワーク対応

Ark UIの最大の特徴は、4つの主要フレームワークで同じAPIが使えること。

React
Vue
Solid
Svelte

これ、意外と大きいんですよ。チームでフレームワークが統一されていない場合や、将来的に技術スタックを変更する可能性がある場合でも、学習コストを最小限に抑えられます。

2. ヘッドレス設計

スタイルが一切付いていない「ヘッドレス」なコンポーネントなので、デザインの自由度が高いです。Tailwind CSS、Panda CSS、Styled Components、Emotionなど、好きなスタイリング手法を選べます。

既存のデザインシステムに組み込みやすいのは、実務で使う上でかなりのメリットですね。

3. 45以上のプロダクション対応コンポーネント

AccordionやDialog、DatePicker、Toastなど、実務で必要になるコンポーネントが一通り揃っています。

主なカテゴリ：

レイアウト・ナビゲーション: Accordion、Tabs、Splitter、Steps
オーバーレイ・ダイアログ: Dialog、Popover、Tooltip、Hover Card
フォーム・入力: Checkbox、Select、Combobox、DatePicker
データ表示・ユーティリティ: Avatar、Progress、Carousel、Toast

4. アクセシビリティファースト

WCAG準拠でスクリーンリーダーテスト済み。アクセシビリティ対応って自分で実装すると結構大変なので、最初から組み込まれているのは時短になります。

5. Zag.jsベースの堅牢な設計

有限状態機械（finite state machines）を基盤としたZag.jsで構築されているため、コンポーネントの動作が予測可能で安定しています。Chakra UIでも実績があるので、信頼性は高いですね。

インストール方法

使用するフレームワークに応じてパッケージをインストールします。

React

npm install @ark-ui/react
# or
pnpm add @ark-ui/react
# or
yarn add @ark-ui/react

Vue

npm install @ark-ui/vue

Solid

npm install @ark-ui/solid

Svelte

npm install @ark-ui/svelte

シンプルですね。

基本的な使い方

Accordionコンポーネントの例（React）

import { Accordion } from '@ark-ui/react/accordion'

export const BasicAccordion = () => {
  return (
    <Accordion.Root>
      <Accordion.Item value="item-1">
        <Accordion.ItemTrigger>
          セクション1
          <Accordion.ItemIndicator>▼</Accordion.ItemIndicator>
        </Accordion.ItemTrigger>
        <Accordion.ItemContent>
          ここにコンテンツが入ります。
        </Accordion.ItemContent>
      </Accordion.Item>

      <Accordion.Item value="item-2">
        <Accordion.ItemTrigger>
          セクション2
          <Accordion.ItemIndicator>▼</Accordion.ItemIndicator>
        </Accordion.ItemTrigger>
        <Accordion.ItemContent>
          2つ目のコンテンツです。
        </Accordion.ItemContent>
      </Accordion.Item>
    </Accordion.Root>
  )
}

Dialogコンポーネントの例（React）

import { Dialog } from '@ark-ui/react/dialog'

export const BasicDialog = () => {
  return (
    <Dialog.Root>
      <Dialog.Trigger>ダイアログを開く</Dialog.Trigger>
      <Dialog.Backdrop />
      <Dialog.Positioner>
        <Dialog.Content>
          <Dialog.Title>確認</Dialog.Title>
          <Dialog.Description>
            この操作を実行しますか？
          </Dialog.Description>
          <Dialog.CloseTrigger>閉じる</Dialog.CloseTrigger>
        </Dialog.Content>
      </Dialog.Positioner>
    </Dialog.Root>
  )
}

Tailwind CSSでスタイリングする例

import { Slider } from '@ark-ui/react/slider'

export const StyledSlider = () => {
  return (
    <Slider.Root className="w-64">
      <Slider.Label className="text-sm font-medium">
        音量
      </Slider.Label>
      <Slider.Control className="relative flex items-center h-5">
        <Slider.Track className="bg-gray-200 h-2 w-full rounded-full">
          <Slider.Range className="bg-blue-500 h-full rounded-full" />
        </Slider.Track>
        <Slider.Thumb
          index={0}
          className="w-5 h-5 bg-white border-2 border-blue-500 rounded-full shadow"
        />
      </Slider.Control>
    </Slider.Root>
  )
}

ヘッドレスなので、クラス名を自由に指定できるのが便利です。

実践的なユースケース

デザインシステムの構築

Ark UIはスタイルがないぶん、自社のデザインシステムに組み込みやすいです。

// 自社のButtonコンポーネントとして再エクスポート
import { Button as ArkButton } from '@ark-ui/react/button'

export const Button = ({ variant, children, ...props }) => {
  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
  }

  return (
    <ArkButton className={`px-4 py-2 rounded ${variants[variant]}`} {...props}>
      {children}
    </ArkButton>
  )
}

フレームワーク移行時の学習コスト削減

ReactからVueに移行する場合でも、Ark UIのAPIは共通なので、コンポーネントの使い方を学び直す必要がありません。

<!-- Vue版でも同じ構造 -->
<script setup>
import { Accordion } from '@ark-ui/vue/accordion'
</script>

<template>
  <Accordion.Root>
    <Accordion.Item value="item-1">
      <Accordion.ItemTrigger>
        セクション1
      </Accordion.ItemTrigger>
      <Accordion.ItemContent>
        コンテンツ
      </Accordion.ItemContent>
    </Accordion.Item>
  </Accordion.Root>
</template>

複雑なフォームUI

DatePickerやComboboxなど、自前で実装すると大変なコンポーネントも用意されています。

import { DatePicker } from '@ark-ui/react/date-picker'

export const BasicDatePicker = () => {
  return (
    <DatePicker.Root>
      <DatePicker.Label>日付を選択</DatePicker.Label>
      <DatePicker.Control>
        <DatePicker.Input />
        <DatePicker.Trigger>📅</DatePicker.Trigger>
      </DatePicker.Control>
      <DatePicker.Positioner>
        <DatePicker.Content>
          <DatePicker.View view="day">
            {/* カレンダーUI */}
          </DatePicker.View>
        </DatePicker.Content>
      </DatePicker.Positioner>
    </DatePicker.Root>
  )
}

類似ライブラリとの比較

ライブラリ	フレームワーク対応	スタイル	コンポーネント数
Ark UI	React/Vue/Solid/Svelte	ヘッドレス	45+
Radix UI	Reactのみ	ヘッドレス	30+
Headless UI	React/Vue	ヘッドレス	10+
shadcn/ui	Reactのみ	Tailwind	40+