このUIデザインかっこいい！ 近未来をテーマにしたUIコンポーネントとデザイン要素のセット -Cosmic UI
Post on:2025年10月9日
sponsorsr
未来的な別世界のインターフェイスを作ろう、とデザインされた近未来をテーマにしたUIコンポーネントとデザイン要素のセットを紹介します。
オープンソースで、商用プロジェクトでも無料で利用できます。
Cosmic UIの特徴
Cosmic UIはカスタマイズ可能なSVGシェイプを備えた、美しくデザインされた近未来をテーマにしたUIコンポーネントとデザイン要素のセットです。インタラクティブロジックにアクセス可能な最新のフレームワーク向けに構築されています。
MITライセンスで、商用プロジェクトでも無料で利用できます。
Cosmic UIはこれまでのコンポーネントライブラリではありません。独自のSFコンポーネントライブラリを構築するためのシステムです。
ほとんどのコンポーネントライブラリはパッケージをインストールして、コンポーネントをインポートして、使用します。しかし、近未来スタイルのUIを実装するにはシャープなエッジ・フレーム・ホログラフィックパネルなど複雑なSVGやCSSを別途記述しなければならないことがあります。
Cosmic UIこの問題を解決するために、カスタマイズ可能なSVGシェイプを使用し、近未来の外観を実現しました。すべてのコンポーネントのマークアップ・SVGパス・スタイルは自由にカスタマイズできます。
Cosmic UIのデモ
近未来の美学を備えて、美しくデザインされたカスタマイズ可能なUIコンポーネントとデザイン要素は、SVGシェイプをベースtにzag.jsをインタラクティブコンポーネントとして活用することで、近未来的なデザインのインターフェイスを作成できるように構築されています。
近未来的なUIデザインを強化するSFをテーマにした厳選されたカラーのリスト。
ボタン、モーダル、UIコンポーネント用のカスタマイズ可能なSVGフレームを表示します。
ボタンまたはボタンのように見えるコンポーネントを表示します。
ユーザーの注意を引くためのアラートを表示します。
垂直に積み重ねられたインタラクティブな見出しのセット。各見出しはコンテンツのセクションを表示します。
プライマリウィンドウまたは別のダイアログウィンドウの上にオーバーレイされ、その下のコンテンツが不活性になるウィンドウ。
ボタンまたはボタンのように見えるコンポーネントを表示します。
フォームの入力欄または入力欄のように見えるコンポーネントを表示します。
チェック可能なボタンのセット（ラジオボタン）で、一度にチェックできるボタンは1つだけです。
Cosmic UIの使い方
Vite用Cosmic UIをインストールして設定します。
最初に、Viteを使用して新しいReactプロジェクトを作成します。React + TypeScript テンプレートを選択します。
|
1 |
pnpm create vite@latest |
Tailwind CSSを加えます。
|
1 |
pnpm add tailwindcss @tailwindcss/vite |
src/index.css内のすべてを下記に置き換えます。
|
1 |
@import "tailwindcss"; |
.jsonファイルの記述など詳しくは、公式のドキュメントをご覧ください。
sponsors
