Jelly UI: リアルな物理演算を備えたソフトなWeb Components

Jelly UIは、依存関係のないWeb Componentsライブラリで、プロダクトインターフェースにソフトで触覚的なインタラクションをもたらします。40のカスタム要素を提供し、すべてWeb Components標準に基づいて構築されており、フレームワークに縛られることはありません。このライブラリには、より有機的な感触を実現するためにソフトボディ物理演算を組み込んだ実際のフォームコントロールが含まれています。

箱の中身

このライブラリは、単一のスクリプトタグで任意のプロジェクトにドロップインできるように設計されています。ダークモード、右から左へのレイアウト、WCAG AAカラートークンを標準でサポートするテーマシステムが含まれています。コンポーネントはアクセシブルでパフォーマンスが高く、外部依存関係はありません。

動作の仕組み

Jelly UIはWeb Components標準を使用しているため、任意のフレームワークまたはフレームワークなしで使用できます。コンポーネントはカスタム要素として登録され、CSSカスタムプロパティでスタイルを設定できます。ライブラリには、カラースキームとアクセシビリティトークンを処理する<jelly-theme>ラッパーが含まれています。

使用例を簡単に示します：

<script type="module" src="https://jelly-ui.com/package.js"></script>

<jelly-theme mode="auto">
  <jelly-button variant="mint">公開</jelly-button>
</jelly-theme>

これが重要な理由

ほとんどのUIライブラリは、重すぎるか（Material UI、Ant Design）、あまりにもミニマルすぎます。Jelly UIはその中間に位置します：軽量で、フレームワークに依存せず、インターフェースをより自然に感じさせる独自のソフトボディ物理演算の感触をもたらします。組み込みのアクセシビリティとダークモード対応は、開発者の時間を節約する素晴らしい機能です。

とはいえ、このライブラリは新しく、コンポーネントセットはフォームコントロールと基本的なUI要素に限定されています。完全なデザインシステムの代替にはなりません。しかし、大規模な依存関係を引きずらずに独特の触覚的な感触を求めるプロジェクトには、検討する価値があります。

結論

Jelly UIは、UIコントロールにソフトボディ物理演算という新しい要素をもたらす、よく設計されたWeb Componentsライブラリです。軽量で、アクセシブルで、統合が簡単です。プロダクトインターフェースを構築していて、パフォーマンスやアクセシビリティを犠牲にせずに差別化したい場合は、試してみてください。