Remix 3のremix/uiを触ってみた（v3ざっくり紹介 + UIコンポーネント実例）

はじめに

Remix 3（beta）の remix/ui を触ったのでメモ。

この記事はこんな感じでいきます。

1. Remix 3って何が変わったの（軽く）
2. remix/ui って実際どんなUIあるの（メイン）

先に結論だけ言うと、remix/ui は「ボタンの見た目セット」だけじゃなくて、
Tabs / Menu / Select / Combobox みたいな操作系も揃ってるのでかなり便利でした。

前提

• 2026-07時点の remix@3.0.0-beta.5 をベースに確認
• Node.js 24.3+ が必要

npx remix@next new my-remix-app

Remix 3をざっくり

Remix 3は、従来のRemix（Reactベース）と違って、独自のUIランタイムを持ってるのが大きいです。

思想としてはざっくりこんな感じ。

• Web APIベース（Fetch / Streamsなど）
• できるだけランタイム中心
• 依存を増やしすぎない
• 合成（composition）しやすい設計

コードで最初に「おっ」となるのはコンポーネントの形。

function MyComponent() {
  return () => <div>Hello</div>
}

「関数が関数を返す」スタイルが基本になります。

remix/uiの全体像

remix/ui には大きく3種類あります。

1. スタイルmixin系（button/input/checkbox/radio/toggle など）
2. 操作コンポーネント系（tabs/menu/select/combobox/accordion など）
3. プリミティブ系（popover/anchor/listbox など）

1) スタイルmixin系

まずはここから触るのがおすすめ。
典型例は button と input です。

import button from 'remix/ui/button'
import input from 'remix/ui/input'

function Sample() {
  return () => (
    <>
      <button mix={button({ tone: 'primary' })}>Save</button>
      <input mix={input()} placeholder="Search" />
    </>
  )
}

ポイントは、className でなく mix={...} に積むところ。

2) 操作コンポーネント系

ここが今回の本題。

Tabs

import { Tabs, TabList, Tab, TabPanel } from 'remix/ui/tabs'

function ProjectTabs() {
  return () => (
    <Tabs defaultActiveTab="overview">
      <TabList aria-label="Project sections">
        <Tab name="overview">Overview</Tab>
        <Tab name="activity">Activity</Tab>
        <Tab name="settings">Settings</Tab>
      </TabList>

      <TabPanel name="overview">Project summary.</TabPanel>
      <TabPanel name="activity">Recent changes.</TabPanel>
      <TabPanel name="settings">Project settings.</TabPanel>
    </Tabs>
  )
}

Menu

import { Menu, MenuItem, Submenu } from 'remix/ui/menu'

function ViewMenu() {
  return () => (
    <Menu label="View">
      <MenuItem name="wordWrap" type="checkbox">Word wrap</MenuItem>
      <MenuItem name="density" type="radio" value="compact">Compact</MenuItem>
      <MenuItem name="density" type="radio" value="comfortable">Comfortable</MenuItem>
      <Submenu label="Zoom">
        <MenuItem name="zoomIn">Zoom in</MenuItem>
        <MenuItem name="zoomOut">Zoom out</MenuItem>
      </Submenu>
    </Menu>
  )
}

Select

import { Select, Option } from 'remix/ui/select'

function FrameworkSelect() {
  return () => (
    <Select defaultLabel="Select a framework" defaultValue="remix" name="framework">
      <Option label="Remix" value="remix">Remix</Option>
      <Option label="React Router" value="react-router">React Router</Option>
      <Option label="Astro" value="astro">Astro</Option>
    </Select>
  )
}

Combobox

Select が「固定候補から1つ選ぶ」なのに対して、Combobox は「入力して候補を絞る」向け。

import { Combobox, ComboboxOption } from 'remix/ui/combobox'

function AirportCombobox() {
  return () => (
    <Combobox name="airport" placeholder="空港名やコードで検索">
      <ComboboxOption label="羽田 (HND)" value="HND" searchValue={['hnd', 'haneda']} />
      <ComboboxOption label="成田 (NRT)" value="NRT" searchValue={['nrt', 'narita']} />
    </Combobox>
  )
}

Accordion

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from 'remix/ui/accordion'

function SettingsAccordion() {
  return () => (
    <Accordion defaultValue="account">
      <AccordionItem value="account">
        <AccordionTrigger>Account</AccordionTrigger>
        <AccordionContent>Manage account preferences.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="billing">
        <AccordionTrigger>Billing</AccordionTrigger>
        <AccordionContent>Review billing details.</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

type="multiple" にすると複数展開もできます。

3) プリミティブ系

より細かく制御したいときは popover / listbox / anchor などのプリミティブを使う流れになります。

「完成品コンポーネントで足りるならそれを使う、足りなければプリミティブへ」の段階設計がやりやすいです。

その他🍤

触ってみて良かった点

• フォーカス管理やキーボード操作が最初からかなり整っている
• Select と Combobox が分かれていて意図が明確
• スタイルmixinとプリミティブの分離が分かりやすい

特に「最初は見た目付きで素早く作って、必要箇所だけプリミティブに落とす」がやりやすいのは好印象でした。

注意点（ハマりどころ）

• beta版なので、仕様やAPIは変わる前提で触る
• インタラクティブなコンポーネントは clientEntry まわりの設定を忘れると動かない
• Asset Server の allow 設定が厳しいので、client entry の参照先を許可する必要がある

このへん、ハマると「見た目は出るのにクリック反応しない」になりがちです。

shadcnよりremix/uiを選ぶメリット

もちろん shadcn が強い場面もあります。これは先に認めておきたいです。

そのうえで、今回触って「こっちを選ぶ理由あるな」と思ったのはこのあたりです。

• Remix 3 の実行モデルに素直に乗せやすい
• スタイルmixinから始めて、必要なところだけプリミティブに降りやすい
• 操作系コンポーネントまで同じ思想で揃っていて、実装のブレが出にくい

特にプロジェクト序盤で「まず一貫したUIを素早く立ち上げたい」なら、
remix/ui のほうが判断コストが低くて進めやすい感触でした。

逆に、既存で React + Tailwind + shadcn の資産が厚いチームなら shadcn 継続は全然アリです。
今回は Remix 3 を前提にしたときの相性重視で、remix/ui に分がある、という温度感です。

まとめ

Remix 3はまだbetaだけど、remix/ui は「これ、実務で試してみたいな」と思える出来でした。

なんでかというと、実務で時間を食いやすいところを最初からかなり肩代わりしてくれるからです。
Tabs / Menu / Select / Combobox みたいな操作系が最初から揃ってるし、
キーボード操作やフォーカス管理の土台も強め。
まずは完成品コンポーネントでサクッと作って、必要なところだけプリミティブに降りる、
みたいな進め方がしやすいのがよかったです。

まずは以下の順で触るのがおすすめです。

1. button / input などのmixin系で感覚を掴む
2. tabs / menu / select / combobox を1ページで試す
3. 必要に応じて popover / listbox などのプリミティブへ

v3の思想に慣れるまで少し時間はかかるけど、慣れると「UIの土台を速く組む」にはかなり強いです。

以上！！