コンテンツへスキップ

有限状態機械を活用したUIコンポーネントパターン集です。開発者は、柔軟でアクセシブルなデザインシステムを構築できます。

React、Vue、Solid.js、Svelteなど、さまざまなフロントエンドフレームワークに対応し、特定のフレームワークに依存せずUIコンポーネントを構築できます。

このライブラリの中核となるステートマシンが複雑なコンポーネントのロジックを処理するため、開発者は堅牢な機能を確保しながら、UIデザインに集中できます。

コンポーネントはアクセシビリティを考慮して設計されており、組み込みのWAI-ARIA準拠アダプターがステートマシンの出力をDOMのセマンティクスに接続します。

さらに、ヘッドレスでスタイルが付いていないため、好みのスタイリング手法を使い、既存のデザインシステムにシームレスに組み込めます。このライブラリはシンプルさと再利用性を重視し、プロジェクト間で一般的なUIパターンを繰り返し実装する手間を減らします。

機能

  • フレームワークに依存しない
  • 堅牢なコンポーネントロジック
  • WAI-ARIAに準拠
  • ヘッドレスでスタイルなしのコンポーネント
  • 複数のJSフレームワークに対応
  • デザインシステムに簡単に統合
  • 有限状態機械を使って構築されたコンポーネント

関連項目

Jotai

Reactアプリケーションの状態管理に、アトミックなアプローチを採用した、高機能で軽量なソリューションです。

Legend State

この高機能なライブラリは、アプリケーションの状態管理を効率化し、複雑なデータの扱いを簡単にします。

MobX-State-Tree

変更可能な状態を構造的に管理し、状態管理を簡素化する多機能ライブラリです。

MobX

この状態管理ソリューションを使えば、アプリケーションに動的なデータをスムーズに統合し、変化にも簡単に対応できます。

Redux Toolkit

Reduxの開発を効率化し、アプリケーションの予測可能性と保守性を高めるための包括的なツールキットです。

valtio

このライブラリは、プロキシベースの状態管理を簡素化します。効率的なレンダリングと簡単な状態操作で、モダンなアプリケーションの開発を支援します。

zustand

シンプルさとパフォーマンスを重視した、Reactアプリ向けの最新の状態管理ソリューションです。

TanStack DB

サブミリ秒で一貫性のあるUIを実現し、リアルタイム同期を可能にする、ライブクエリと楽観的ミューテーション対応のリアクティブなクライアントストアです。