Arc UI

ドキュメント  ·  コンポーネント  ·  インストール  ·  AI と MCP  ·  Pro

Arc は、モーションを組み込んだ React コンポーネントとブロックのライブラリです。各アイテムは、所有権がお客様にあるプレーンなソースです。少数のデザイントークンを使った CSS モジュール、アニメーション用の Motion、キーボードサポート、そしてすべてのアニメーションに用意された動きを抑えるための設定が含まれます。shadcn CLI でインストールするか、ファイルを手動でコピーできます。Tailwind の有無を問わず、Next.js と Vite で動作します。このリポジトリには無料のオープンソース版が含まれており、119 個のコンポーネントと 22 個のブロックに加えて、それらに共通するデザインおよびモーショントークンも収録されています。すべてのアイテムを uiarc.dev でライブプレビューできます。

ショーケース

uiarc.dev からライブで記録した、おすすめのアイテムをいくつか紹介します。^Pro のマークが付いたアイテムは Arc Pro の一部で、このリポジトリには含まれていません。それ以外はすべて、ここから無料でインストールできます。

カバーフロー Pro 投げるように動かせる写真の奥行きのあるレール。柔らかな接地影と控えめな反射を備えています。	ドーナツチャート データセットを切り替えると弧が変形し、合計値が中央に収まります。
請求切り替え 月額料金と年額料金が切り替わり、割引額も表示されます。	オービットロゴ Pro 連携サービスが製品ロゴの周りを回ります。カテゴリで絞り込めます。
ウォレットスタック Pro カードの束を扇状に広げ、1枚を持ち上げて利用状況を確認できます。	折れ線グラフ 期間を切り替えると、前の期間と比較できるように線が描き直されます。
数値フィールド 上限に達すると知らせてくれる、範囲制限付きのステッパーです。	アクティビティリング Pro 毎日の目標が進み、カウントアップし、100％を超えて2周目を描きます。

• ショーケース
• インストール
  • 要件
  • shadcn CLI を使う
  • コピー＆ペースト
• 使い方
• テーマ設定
• コンポーネント
• ブロック
• AI ツール
• トラブルシューティング
• リリースの仕組み
• リポジトリの構成
• Arc Pro
• コントリビューション
• ライセンス

インストール

要件

• TypeScript を使用した React 19。ソースは strict、noUncheckedIndexedAccess、verbatimModuleSyntax の設定でコンパイルでき、lib は ES2023 以降が必要です（いくつかの項目で findLast を使用します）。
• Next.js（App Router）または Vite
• アニメーション用の motion。項目によっては lucide-react や Radix UI のプリミティブも使用します。CLI が項目に必要なものをインストールします。
• @/* インポートエイリアス（Next.js と shadcn ではデフォルトで設定されています）

Tailwind は必要ありません。Arc のスタイルは CSS 変数を参照する CSS モジュールです。

shadcn CLI を使う

components.json に @uiarc 名前空間を一度登録します。

{
  "registries": {
    "@uiarc": "https://uiarc.dev/r/{name}.json"
  }
}

次に、名前を指定して項目を追加します。ブロック内のコンポーネントなど、ローカルの依存関係も自動的に追加されます。

npx shadcn@latest add @uiarc/button @uiarc/dialog

components.json を変更せずに、各項目の完全な URL を指定してインストールすることもできます。

npx shadcn@latest add https://uiarc.dev/r/button.json

npx shadcn@latest add @uiarc/arc-foundation を実行して、アプリごとにデザイントークンを一度インストールし、アプリのルートでインポートしてください。コンポーネントが取り込むのはモーションプリセット（arc-motion-tokens）だけで、foundation.css が再インストールされることはありません。そのため、トークンを独自のテーマパッケージに含めることもできます。

// app/layout.tsx (Next.js) or src/main.tsx (Vite)
import "@/components/arc/foundation.css";

npx create-next-app@latest my-app
cd my-app
npx shadcn@latest init

npm create vite@latest my-app -- --template react-ts
cd my-app
npx shadcn@latest init

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["./src/*"] }
  }
}

import path from "node:path";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react()],
  resolve: { alias: { "@": path.resolve(__dirname, "./src") } },
});

コピー＆ペースト

1. 共通パッケージをインストールします：npm install motion lucide-react。
2. このリポジトリから registry/foundation.css、registry/motion-tokens.ts、lib/motion-tokens.ts を @/ ルート配下の同じパスにコピーし、CSS をルートで一度インポートします。
3. 項目のフォルダーを registry/components/<id>/ または registry/blocks/<id>/ から、パスを維持したままコピーします。コピーしたファイルはこのリポジトリの構成を維持し、互いに @/ 経由でインポートします。上記の CLI インストールを使うと、パスは自動的に書き換えられます。public/r/<id>.json ファイルに、必要なファイルと npm パッケージがすべて記載されています。

uiarc.dev の各ページには、正確なファイルを確認できる Manual タブもあります。

使い方

CLI は、components.json の components エイリアス配下にある arc/ フォルダーにすべてのファイルを配置します。たとえば components/arc/button/button.tsx、または src/ を使うプロジェクトやモノレポのパッケージでは src/components/arc/… になります。Arc のファイルは相対パスで互いをインポートするため、どのようなエイリアス設定でも使えます。別の場所に置きたい場合は、arc/ フォルダー全体を移動してください。通常のローカルコンポーネントと同じように使えます。

import { Button } from "@/components/arc/button/button";

export default function Page() {
  return <Button>Save changes</Button>;
}

コードはあなたのものです。編集、名前変更、移動は自由です。同期を保つ必要のあるランタイムパッケージはありません。

テーマ設定

コンポーネントは意味的なトークンを参照し、生の色を直接参照することはありません。foundation.css（CLI のインストール後は components/arc/foundation.css）のトークンを変更すると、両方のテーマですべてのコンポーネントに反映されます。

• ダークモード： <html> に data-theme="dark" を設定します。ダークテーマの値は反転ではなく、個別に調整されています。
• アクセント： <html> の data-accent に neutral、violet、blue、green、amber、orange、coral、rose のいずれかを設定します。
• モーション： スプリングと再生時間は lib/motion-tokens.ts（CLI のインストール後は components/arc/lib/motion-tokens.ts）に定義されています。すべてのアニメーションは prefers-reduced-motion に従います。

詳しくは、テーマ設定のドキュメントとモーションのドキュメントをご覧ください。

コンポーネント

無料のコンポーネントを119種類、サイトと同じ分類で掲載しています。名前をクリックすると、ライブプレビューとドキュメントを確認できます。

アクション (20) · 入力 (37) · 開閉 (14) · フィードバック (11) · データ (32) · テキスト (4) · 特別 (1)

アクション

ボタン

ジェスチャー

メニュー

テーマ

入力

テキストフィールド

特殊な入力

セレクト

トグル

スライダー

ピッカー

エディター

開示

ナビゲーション

展開

オーバーレイ

フィードバック

メッセージ

進捗

データ

アバター

カード

チャート

テーブル

アクティビティ

メディア

テキスト

テキストエフェクト

特殊

タイプ

ブロック

Arc コンポーネントで構築された、セクションや画面一式の無料ブロックが22種類あります。

アプリシェル

認証

料金プラン

メディア

ヒーロー

特長

ソーシャルプルーフ

コンテンツ

ヘッダーとフッター

AI ツール

Arc は、AI コーディングツールから利用できるように構築されています。

• MCP サーバー： https://uiarc.dev/api/mcp（Streamable HTTP、無料アイテムはキー不要）。Claude Code、Cursor、VS Code、Codex から検索、ドキュメントの閲覧、ソースの取得ができます。

  claude mcp add --transport http arc https://uiarc.dev/api/mcp
  

• llms.txt： インデックスは https://uiarc.dev/llms.txt、すべてを1つのファイルにまとめたものは llms-full.txt をご覧ください。

• Markdown ドキュメント： すべてのページに /components/<id>/markdown の Markdown 版があります。

各クライアントのセットアップについては、AI と MCP のドキュメントをご覧ください。

トラブルシューティング

"use client";
import Image from "next/image";
import Link from "next/link";
import { ArcProvider } from "@/components/arc/lib/arc-provider";

export function Providers({ children }: { children: React.ReactNode }) {
  return <ArcProvider link={Link} image={Image}>{children}</ArcProvider>;
}

リリースの仕組み

新しい無料コンポーネントとブロックは、少しずつ定期的にリリースされます。各リリースでは、このリポジトリ、@uiarc レジストリ、変更履歴がまとめて更新されるため、ここにあるコードは常に CLI からインストールされるものと一致します。新しいアイテムを知るには、リポジトリをウォッチまたはスターしてください。

リポジトリの構成

registry/foundation.css      design tokens, light and dark themes
registry/motion-tokens.ts    motion presets
lib/motion-tokens.ts         motion presets, shared path
lib/                         small shared helpers
registry/components/<id>/    components
registry/blocks/<id>/        blocks
registry.json                shadcn registry index
public/r/<id>.json           prebuilt registry items, one per component or block

Arc Pro

Arc Pro では、このライブラリに加えて、さらに 156 個のコンポーネントとブロックが利用できます。上記の Cover フローのようなギャラリー、ウォレットや金融関連の画面、より充実したチャート、製品画面一式が含まれます。ここにあるすべてのものと同じ方針に沿っており、所有できるプレーンなソース、両方のテーマ、キーボード対応、視差効果を減らす設定への対応を備えています。

• すべての Pro コンポーネントとブロックのソース。個人用トークンを使って同じ shadcn CLI から、または MCP サーバー経由でインストールできます
• Pro の新しいリリースすべてに加え、すでに利用しているアイテムの修正と更新
• 年払い、または生涯アクセス権を一括払いで購入できます。料金をご覧ください

このリポジトリにあるものはすべて、引き続き無料で、MIT ライセンスで提供されます。

貢献

バグ報告、修正、コンポーネントのアイデアを歓迎します。まずCONTRIBUTING.mdを読み、行動規範に従ってください。セキュリティ上の問題を報告するには、SECURITY.mdをご覧ください。

ライセンス

MIT © 2026 Elia Kuratli