2024：Blazor UI コンポネント・ライブラの機能比較

背景

今の仕事で Blazor UI コンポーネント・ライブラリを調査する必要があったので、グーグル検索の結果から得た最初の9つを選択し、機能比較を行いました。そのうち 4 つは有料で、残りの 5 つは無料で商用利用が可能です。

プロキシの背後にあるためからかな、けどbitPlatform の bit BlazorUI のドキュメントにエラー メッセージが表示されるにかかわらず、
github リポジトリは定期的に更新されているようなので、インストールせずにできる限り調べてみました。

この調査は決して網羅的または詳細ではなく、機能の名前がライブラリ間で大きく異なる場合があるため、主にいくつかのエラーが忍び込んだ可能性があります。

最終の選択

最終的に、ライブラリにお金を出したくなくて、グラフまたはデータ視覚化コンポーネントも必要なかったので、Microsoft の支援を受けている FluentUI を使用することにしました。

試用期間の結果

FluentUI と MudBlazor でいくつかの問題に遭遇した後、最終的には内部ツールの作成のため、 Radzen を選択しました。
次はその 3 つのフレームワークの問題の話します。

FluentUI

• データテーブルはクリック イベントを処理しません。
• カラースタイルは制限されているため、あまり良くありません。

MudBlazor

• .NET 8.0 でそれほどバグがなければ非常に優れています (モーダル ダイアログの作成時にオプションを追加するとクラッシュが発生します)
• 主要なドキュメントは非常に単純ですが、より詳細なドキュメントは別の API ドキュメントで入手できます

Radzen

• インストール可能なテンプレートはない
• 非常に単純なドキュメント (実際にはサンプルの抜粋のみ) にソース コードへのリンクが追加されています。 （初心者は注意してください）
• それを除けば、今のところかなり良いです...

機能比較

	b i t	B l a z o r i z e	D e v E x p r e s s	F a s t	F l u e n t U I	M u d B l a z o r	R a d z e n	S y n c f u s i o n	T e l e r i k
有料 無料	無料	有料	有料	無料	無料	無料	無料	有料	有料
ライセンス料	―	$ 599 / year ～	$ 1000 / year ～	―	―	―	―	$ 4740 / year ～	$ 1099 / year ～
ライセンス数	―	1	1	―	―	―	―	5	1
コンポネント数	?	80+	40+	38+	67+	66+	70+	85+	110+
🌸　チャートと地図（Charts & Maps）
Area	✕	✕	〇	✕	✕	✕	〇	〇	〇
Area　Range	✕	✕	〇	✕	✕	✕	✕	〇	〇
Area Stacked	✕	✕	〇	✕	✕	✕	〇	〇	✕
Bar	✕	〇	〇	✕	✕	〇	〇	〇	〇
Bar Range	✕	✕	〇	✕	✕	✕	✕	〇	〇
Bar　Stacked	✕	✕	〇	✕	✕	〇	〇	〇	✕
Box Plot	✕	✕	✕	✕	✕	✕	✕	〇	✕
Bubble	✕	✕	〇	✕	✕	✕	✕	〇	〇
Bullet	✕	✕	✕	✕	✕	✕	✕	〇	✕
Candle Stick	✕	✕	〇	✕	✕	✕	✕	〇	〇
Column	✕	✕	〇	✕	✕	〇	〇	〇	〇
Column Range	✕	✕	〇	✕	✕	✕	✕	〇	〇
Column Stacked	✕	✕	〇	✕	✕	〇	〇	〇	✕
Doughnut	✕	〇	〇	✕	✕	〇	〇	〇	〇
Error Bar	✕	✕	✕	✕	✕	✕	✕	〇	✕
Funnel	✕	✕	✕	✕	✕	✕	✕	〇	✕
Gantt	✕	✕	✕	✕	✕	✕	✕	〇	〇
Heat Map	✕	✕	✕	✕	✕	〇	✕	〇	〇
Histogram	✕	✕	〇	✕	✕	✕	✕	〇	✕
Line	✕	〇	〇	✕	✕	〇	〇	〇	〇
Map	✕	✕	✕	✕	✕	✕	〇	〇	〇
OHLC	✕	✕	〇	✕	✕	✕	✕	〇	〇
Pie	✕	〇	〇	✕	✕	〇	〇	〇	〇
Polar Radar	✕	〇	✕	✕	✕	✕	✕	✕	〇
Polar Area	✕	〇	✕	✕	✕	✕	✕	✕	〇
Pyramid	✕	✕	✕	✕	✕	✕	✕	〇	✕
Scatter Plot	✕	✕	〇	✕	✕	✕	✕	〇	〇
Spline	✕	〇	〇	✕	✕	〇	〇	〇	✕
Spline Area	✕	〇	〇	✕	✕	✕	〇	〇	✕
Step	✕	✕	〇	✕	✕	✕	✕	〇	✕
Step Area	✕	✕	〇	✕	✕	✕	✕	〇	✕
Step Range	✕	✕	〇	✕	✕	✕	✕	〇	✕
Tree Map	✕	✕	✕	✕	✕	✕	✕	〇	✕
Waterfall	✕	✕	✕	✕	✕	✕	✕	〇	〇
🌸　コンポネント（Components）
Anchor	✕	✕	✕	〇	〇	✕	✕	✕	✕
Anchored Region	✕	✕	✕	〇	〇	✕	✕	✕	✕
Animation	✕	〇	✕	✕	✕	✕	✕	✕	✕
Avatar	✕	✕	✕	✕	〇	〇	〇	〇	〇
Badge	〇	〇	✕	〇	〇	〇	〇	〇	✕
Badge (Counter)	?	✕	✕	✕	〇	〇	〇	〇	✕
Badge (Presence)	?	✕	✕	✕	〇	〇	✕	〇	✕
Carousel	〇	〇	✕	✕	✕	〇	✕	〇	〇
Disclosure	✕	✕	✕	〇	✕	✕	✕	✕	✕
Divider Separator	〇	〇	✕	〇	〇	〇	✕	✕	✕
Drap & Drop DropZone	✕	〇	✕	✕	〇	〇	✕	△	△
Emojis	✕	✕	✕	✕	〇	✕	✕	✕	✕
Icon	〇	〇	✕	✕	〇	〇	〇	✕	〇
Image	〇	✕	✕	✕	✕	〇	〇	✕	✕
Label	〇	✕	✕	✕	〇	✕	✕	〇	〇
Loading Indicator	〇	〇	〇	✕	✕	〇	〇	✕	✕
Overflow	✕	✕	✕	✕	〇	✕	✕	✕	✕
Overlay	〇	✕	✕	✕	〇	〇	✕	✕	✕
Persona	〇	✕	✕	✕	〇	✕	✕	✕	✕
Progress (Bar)	〇	〇	✕	✕	✕	✕	✕	✕	✕
Progress (Page)	?	〇	✕	〇	〇	〇	〇	〇	✕
Progress (Ring)	?	✕	✕	〇	〇	〇	〇	〇	✕
Shimmer Skeleton	〇	✕	✕	〇	〇	〇	✕	✕	〇
Swipe Area Swipper	〇	✕	✕	✕	✕	〇	✕	✕	✕
Toolbar	✕	✕	〇	〇	〇	〇	✕	〇	〇
Tooltip	〇	〇	✕	〇	〇	〇	〇	〇	〇
Typography	〇	〇	✕	✕	✕	〇	〇	✕	✕
Video	✕	〇	✕	✕	✕	✕	✕	✕	✕
Wait Indicator (Bar)	?	✕	✕	✕	✕	〇	〇	〇	✕
Wait Indicator (Spinner)	〇	✕	〇	✕	✕	〇	〇	〇	✕
🌸　データの視覚化（Data Visualization）
Bar Code	✕	✕	〇	✕	✕	✕	✕	〇	〇
Data　Grid	✕	〇	〇	〇	〇	〇	〇	〇	〇
Data　List	✕	✕	✕	✕	✕	✕	〇	✕	✕
Gauge (Arc)	✕	✕	✕	✕	✕	✕	✕	〇	〇
Gauge (Circular)	✕	✕	✕	✕	✕	✕	✕	✕	〇
Gauge (Linear)	✕	✕	✕	✕	✕	✕	✕	✕	〇
Gauge (Radial)	✕	✕	✕	✕	✕	✕	✕	〇	〇
Kanban	✕	✕	✕	✕	✕	✕	✕	〇	✕
List View	〇	〇	✕	✕	✕	〇	✕	〇	〇
Pivot Grid / Table	✕	✕	〇	✕	✕	✕	✕	〇	〇
QR Code	✕	〇	〇	✕	✕	✕	✕	〇	〇
Table	✕	〇	✕	✕	✕	〇	✕	✕	✕
Timeline	〇	✕	✕	✕	✕	〇	〇	✕	〇
Tree Grid / List	✕	✕	✕	✕	✕	✕	✕	〇	〇
Tree View	✕	〇	〇	〇	〇	〇	〇	〇	〇
🌸　ダイアログ、パネル、ポップオーバー（Dialogs, Panels & Popovers）
Dialog Modal Window	〇	〇	〇	〇	〇	〇	〇	〇	〇
Dropdown Popover	✕	✕	〇	✕	〇	〇	✕	✕	✕
Message Box	✕	〇	✕	✕	〇	〇	✕	✕	✕
Popup	✕	✕	〇	✕	✕	✕	〇		✕
Splash Screen	✕	✕	✕	✕	〇	✕	✕	✕	✕
🌸　エディターとビューアー（Editors & Viewers）
Diagram Editor	✕	✕	✕	✕	✕	✕	✕	〇	✕
HTML Editor	✕	✕	✕	✕	✕	✕	〇	✕	✕
Image Cropper	✕	〇	✕	✕	✕	✕	✕	✕	✕
Image Editor	✕	✕	✕	✕	✕	✕	✕	〇	✕
In Place Editor	✕	✕	✕	✕	✕	✕	✕	〇	✕
Markdown Editor	✕	〇	✕	✕	✕	✕	✕	✕	✕
PDF Viewer	✕	✕	✕	✕	✕	✕	✕	〇	〇
Rich Text Editor	✕	〇	〇	✕	✕	✕	✕	〇	〇
WordProcessor	✕	✕	〇	✕	✕	✕	✕	〇	✕
🌸　フォームと入力フィールド（Forms & Inputs）
Auto Complete	✕	〇	✕	✕	〇	〇	〇	〇	〇
Button (Speech To Text)	✕	✕	✕	✕	✕	✕	〇	✕	✕
Button (Split)	?	✕	✕	✕	✕	✕	✕	〇	〇
Button (Toggle)	✕	✕	✕	✕	✕	〇	〇	✕	〇
Button (Toggle) Group	✕	〇	✕	✕	✕	〇	✕	〇	〇
Calendar	〇	〇	〇	✕	〇	〇	〇	〇	〇
Canvas Signature	✕	〇	✕	✕	✕	〇	✕	〇	〇
Checkbox	〇	〇	〇	〇	〇	〇	〇	〇	〇
Checkbox List	〇	✕	✕	✕	✕	✕	〇	✕	✕
Chip Tag	✕	✕	〇	✕	✕	〇	✕	〇	〇
Chiplist Taglist	✕	✕	〇	✕	✕	〇	✕	〇	〇
Color Gradient	✕	✕	✕	✕	✕	✕	✕	✕	〇
Color Input	✕	〇	✕	✕	✕	〇	✕	✕	✕
Color Palette	✕	✕	✕	✕	✕	✕	✕	✕	〇
Color Picker	〇	〇	✕	✕	✕	〇	〇	〇	〇
Combo Box	?	✕	〇	〇	〇	✕	✕	〇	〇
Date Edit Date Input	?	〇	✕	✕	✕	〇	✕	✕	〇
Date Picker	〇	〇	〇	✕	〇	〇	〇	〇	〇
Date Range Picker	〇	〇	✕	✕	✕	〇	✕	〇	〇
Date Time Picker	?	✕	〇	✕	✕	✕	〇	〇	〇
Dropdown Select	〇	〇	✕	〇	〇	〇	〇	〇	〇
File DropZone	✕	✕	〇	✕	✕	✕	✕	✕	〇
File Input	✕	〇	〇	✕	✕	✕		✕	✕
File Manager	✕	✕	✕	✕	✕	✕	✕	〇	✕
File Upload	✕	✕	〇	✕	✕	〇		〇	〇
Highlighter	✕	〇	✕	✕	〇	〇	✕	✕	✕
Input Field	?	〇	✕	✕	✕	〇	✕	✕	✕
List Box Select List	?	〇	〇	〇	〇	✕	〇	〇	〇
List Box (Dual) Transfert list	?	〇	✕	✕	✕	✕	✕	〇	〇
Masked Input	?	〇	〇	✕	✕	〇	〇	〇	〇
Number Field	〇	〇	〇	〇	〇	〇	〇	〇	〇
Number Picker Spinner	〇	〇	〇	〇	〇	〇	〇	〇	〇
Option	✕	✕	✕	〇	〇	✕	✕	✕	✕
QueryBuilder		✕	✕	✕	✕	✕	✕	〇	✕
Radio Button	✕	〇	〇	〇	〇	〇	〇	〇	✕
Radio Group	✕	〇	〇	〇	〇	〇	〇	〇	〇
Rating	✕	〇	✕	✕	✕	〇	〇	〇	✕
Scheduler	✕	✕	〇	✕	✕	✕	〇	〇	〇
Search	〇	✕	✕	✕	〇	✕	✕	✕	✕
Slider	〇	〇	✕	〇	〇	〇	〇	〇	〇
Slider (Range)	✕	✕	✕	✕	✕	✕	〇	〇	〇
Switch Toggle	〇	〇	✕	〇	〇	〇	〇	〇	〇
Textarea Memo	?	〇	〇	〇	〇	〇	〇	〇	〇
Textbox Textfield	〇	〇	〇	〇	〇	〇	〇	〇	〇
Time Input	?	〇	✕	✕	✕	✕	✕	✕	✕
Time Picker	〇	〇	✕	〇	〇	〇	✕	〇	〇
Toolbar	〇	〇	✕	〇	〇	〇	✕	〇	〇
🌸　レイアウト（Layout）
App Bar Header	✕	✕	✕	✕	〇	〇	〇	〇	〇
Body Content	✕	✕	✕	✕	〇	✕	✕	✕	✕
Breakpoint	✕	✕	〇	〇	✕	〇	〇	✕	✕
Card	✕	〇	✕	〇	〇	〇	〇	〇	〇
Collapsible Panel	✕	✕	✕	✕	✕	〇	〇	✕	✕
Container	✕	✕	✕	✕	✕	〇	✕	✕	✕
Footer	✕	✕	〇	✕	〇	✕	✕	✕	✕
Grid	?	〇	✕	✕	〇	〇	✕	✕	✕
Grid Column	?	〇	✕	✕	✕	✕	〇	✕	✕
Grid Row	?	〇	✕	✕	✕	✕	〇	✕	✕
Grid Layout	?	✕	✕	✕	✕	✕	✕	✕	〇
Hero Jumbotron	✕	〇	✕	✕	✕	✕	✕	✕	✕
Layout	?	✕	✕	✕	〇	✕	✕	✕	✕
Main Layout	?	〇	〇	✕	〇	✕	〇	✕	✕
Media Query	✕	✕	✕	✕	✕	✕	✕	〇	〇
Paper	✕	✕	✕	✕	✕	〇	✕	✕	✕
Spacer Spacing	✕	✕	✕	✕	〇	〇	〇	✕	✕
Stack Layout	〇	✕	〇	✕	〇	〇	〇	✕	〇
Tile Layout	?	✕	✕	✕	✕	✕	✕	△	〇
🌸　ナビゲーション（Navigation）
Accordion Panel Bar	〇	〇	〇	〇	〇	✕	〇	〇	〇
Bread Crumbs	〇	〇	✕	〇	〇	〇	〇	〇	〇
Button	〇	〇	〇	〇	〇	〇	〇	〇	〇
Button (Action) FAB	?	✕	✕	✕	✕	〇	〇	〇	✕
Button Group	〇	✕	✕	✕	✕	〇	✕	〇	✕
Button (Scroll To Top)	✕	✕	✕	✕	✕	〇	✕	✕	✕
Drawer Side Panel / Bar	✕	✕	✕	✕	〇	〇	✕	〇	〇
Flipper	?	✕	✕	〇	〇	✕	✕	✕	✕
Horizontal Scroll	✕	✕	✕	〇	〇	✕	✕	✕	✕
Link	〇	〇	✕	✕	✕	〇	〇	✕	✕
Menu (Bar)	?	✕	〇	✕	〇	✕	〇	〇	〇
Menu (Dropdown Button)	?	✕	△	✕	〇	〇	△	〇	〇
Menu (Context)	?	✕	✕	✕	✕	✕	〇	✕	〇
Menu (Nav Tree)	?	✕	✕	✕	〇	✕	✕	〇	✕
Menu (Panel)	?	✕	△	〇	〇	〇	〇		〇
Menu (Profile)	?	✕	✕	✕	✕	✕	〇	✕	✕
Nav Menu	?	✕	✕	✕	〇	✕	✕	✕	✕
Pager Pagination	〇	〇	〇	✕	〇	✕	〇	〇	〇
Side Bar	✕	〇	✕	✕	✕	✕	✕	✕	✕
Splitter	✕	✕	✕	✕	〇	✕	〇	〇	✕
Stepper Wizard	✕	〇	✕	✕	〇	✕	〇	〇	〇
Tabs	〇	〇	〇	〇	〇	〇	〇	〇	〇
🌸　通知（Notifications）
Alert Message	✕	〇	✕	✕	✕	〇	〇	〇	〇
Message Bar	〇	✕	✕	✕	〇	✕	✕	✕	✕
Notification Snack Bar Toast	〇	〇	✕	✕	〇	✕	〇	〇	✕
🌸　報告（Reporting）
Merge (Mail)	✕	✕	〇	✕	✕	✕	✕	〇	✕
Merge (PDF)	✕	✕	〇	✕	✕	✕	✕	✕	〇
Merge (Report)	✕	✕	〇	✕	✕	✕	✕	✕	✕
Report	✕	✕	〇	✕	✕	✕	✕	〇	〇

参考

• bit BlazorUI ※ ページレンダリングエラー
• Blazorize
• DevExpress Blazor UI Components
• Fast
• Microsoft FluentUI
• MudBlazor Blazor Component Library
• Radzen Blazor Components
• Syncfusion Blazor Components
• Telerik Blazor UI Components