Repolode
投稿する
mickadesign

mickadesign/fluid-functionalism

洗練されたUIコンポーネント、弾むようなホバー遷移、Radix版とBase UI版を備えたshadcn/uiコンポーネントレジストリ。

GitHub で見る公式サイト
スター
1,139
フォーク
55
未解決の Issue
19
最終コミット
21 時間前

これは何？

Fluid Functionalismは、UIコンポーネント、共通のインタラクションシステム、組み合わせて使えるブロックを提供するshadcn/uiレジストリです。遷移には固定時間ではなくスプリングを採用し、状態の変化を追いやすくすることを重視しています。リスト内の項目間をホバー時のハイライトが滑らかに移動し、周囲のレイアウトをずらさずにフォントの太さが変化します。

プリミティブに依存するコンポーネントはRadix版とBase UI版の2種類があり、どちらも同じAPIを使えます。インストールにはshadcn CLIを使い、レジストリ名またはURLを指定すると依存関係が自動で解決されます。コンポーネントをあらかじめインストールしたNext.jsアプリをひな形から作成するstarterコマンドや、デフォルトではLucideを使い、ほかのアイコンセットにも対応できる設定可能なアイコンプロバイダーも用意されています。

Button、Dialog、Combobox、Calendar、Sidebar、ColorPicker、ChatMessageなど幅広いコンポーネントに加え、スプリングモーションのプリセットやタイポグラフィスケールなどのシステムも提供しています。ドキュメントサイトでは、AIコーディングエージェント向けにMarkdownおよびllms.txt形式の出力も利用できます。

主な機能

  • 01レジストリ名またはURLを指定して、shadcn CLIからインストールできます。
  • 02プリミティブベースのコンポーネントはRadix版とBase UI版で同じAPIを共有します。
  • 03スプリングベースの遷移を採用し、共通のホバーハイライトがリスト内の項目間を滑らかに移動します。
  • 04Inter可変フォントの設定により、文字の太さが変わってもレイアウトがずれません。
  • 05アイコンスロットはデフォルトでLucideを使用し、ほかのアイコンセットにも切り替えられます。

ユースケース

  • 洗練されたホバーや遷移の挙動が必要な、shadcn/uiベースのNext.jsまたはReactアプリを構築する。
  • 入力欄、メッセージバブル、思考中インジケーターを備えたチャットインターフェースを追加する。
  • サイズ変更可能なサイドバー、コマンドメニュー、設定ダイアログを備えたアプリのシェルを作成する。
  • プリミティブを切り替えずに、Base UIまたはRadixをすでに採用しているプロジェクトで利用する。

クイックスタート

  1. 1

    すべてのコンポーネントをインストールして、新しい Next.js アプリを作成する

    npx shadcn@latest create -n my-app -t next https://www.fluidfunctionalism.com/r/starter/default.json
  2. 2

    既存のプロジェクトに Fluid Functionalism レジストリを追加する

    npx shadcn@latest registry add @fluid
  3. 3

    レジストリ名を指定してコンポーネントをインストールする

    npx shadcn@latest add @fluid/button

使う前に知っておきたいこと

  • コンポーネントはバージョン管理されたパッケージとしてではなく、shadcn/ui のソースコードとしてプロジェクトにインストールされます。
  • --overwrite を使用すると、同じ名前の既存の標準 shadcn ファイルは置き換えられます。
  • フォントウェイトのアニメーションには、wght と opsz の両方の軸を有効にして Inter を読み込む必要があります。

収録されている特集

フロントエンドのフレームワークとUIコンポーネント

トピック

#react#shadcn-ui#tailwind-css#ui-components#animation#design-system#typescript

よくある質問

fluid-functionalism とは？
洗練されたUIコンポーネント、弾むようなホバー遷移、Radix版とBase UI版を備えたshadcn/uiコンポーネントレジストリ。 Fluid Functionalismは、UIコンポーネント、共通のインタラクションシステム、組み合わせて使えるブロックを提供するshadcn/uiレジストリです。遷移には固定時間ではなくスプリングを採用し、状態の変化を追いやすくすることを重視しています。リスト内の項目間をホバー時のハイライトが滑らかに移動し、周囲のレイアウトをずらさずにフォントの太さが変化します。
fluid-functionalism は無料で使えますか？ライセンスは？
fluid-functionalism は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
fluid-functionalism は今もメンテナンスされていますか？
活発にメンテナンス中。fluid-functionalism の最終コミットは 2026年11月6日 です。
fluid-functionalism は何に使えますか？
洗練されたホバーや遷移の挙動が必要な、shadcn/uiベースのNext.jsまたはReactアプリを構築する。 入力欄、メッセージバブル、思考中インジケーターを備えたチャットインターフェースを追加する。 サイズ変更可能なサイドバー、コマンドメニュー、設定ダイアログを備えたアプリのシェルを作成する。 プリミティブを切り替えずに、Base UIまたはRadixをすでに採用しているプロジェクトで利用する。
fluid-functionalism のインストール方法は？
すべてのコンポーネントをインストールして、新しい Next.js アプリを作成する: npx shadcn@latest create -n my-app -t next https://www.fluidfunctionalism.com/r/starter/default.json 既存のプロジェクトに Fluid Functionalism レジストリを追加する: npx shadcn@latest registry add @fluid レジストリ名を指定してコンポーネントをインストールする: npx shadcn@latest add @fluid/button
fluid-functionalism はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/mickadesign/fluid-functionalism

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト