shadcnの歴史的アップデートである「shadcn create」の登場により、コンポーネントライブラリのカスタマイズが劇的に進化した。これまでもshadcnは高度にカスタマイズ可能であったが、多くのウェブサイトがデフォルトのスタイルをそのまま使用していた。shadcn createは、ベースUIライブラリの選択、テーマカラー、フォント、アイコンセット、角丸の設定など、プロジェクト開始前に包括的なカスタマイズを可能にする。動画では実際に複数のAIモデル(GPT-5.2、Claude Opus 4.5、Gemini 3 Pro、Composer)を使用して画像生成スタジオUIを作成し、shadcnテンプレートの有無でUIの品質を比較検証している。結果として、shadcnテンプレートを使用することで、UIが苦手なモデルでも一定水準以上のUIを生成できることが実証された。この変革により、ウェブサイトの外観がより多様化し、エコシステム全体のレベルアップが期待される。
もし皆さんがここにしばらくいるなら、私がshadcnをどれだけ愛しているかすでにご存知でしょう。コンポーネントライブラリ、スタイルシステム、そして実際にコードベースに存在するものの素晴らしいブレンドです。常に完全にカスタマイズ可能であり、これは構築するすべてのものの見た目と動作を定義するシステムを構築する際に非常に重要です。
しかし、それでも彼らが提供しているシステムです。その結果、多くのウェブサイトがそのまま使い続けています。まったく同じツールチップ、まったく同じドロップダウンメニュー、またはサイトで何か問題が起きたときのまったく同じトーストを何度見たか数えきれません。
そして、shadcnチームも同じように感じているようです。だからこそ、彼らはshadcn createという、これまでで最大の変更を導入したのです。shadcnをカスタマイズすることは常に可能でしたが、このレベルまで前面に押し出されたことはありませんでした。彼らは独自のshadcnを構築するための完全なシステムを構築しました。本当に本当にクールです。
これは基盤となっていると言っても過言ではありません。古いRadix UIプリミティブの代わりに新しいbase UIプリミティブの上に構築されているからというだけでなく、両者を切り替えることができるのですが、彼らがこれに多大な努力を注いだからです。本当に本当にクールなものであり、これでできるすべての楽しいことと、ここに至るまでの歴史をデモしたいと思います。
ウェブ用のアプリケーションを構築しているなら、これは見る価値があると約束します。いつものように、Vercelはもう私たちにお金を払っていません。実際、私は彼らに支払った金額の方がはるかに多いです。今日話している誰も私たちにお金を払っていません。今日のスポンサーを除いて。コードを書くためにAIがどれだけ役立つかについて多くの議論を見てきました。そして理解できます。
いくつかのことに関しては、他のものほど役に立たないだけです。しかし、AIが役に立たないとは信じられないことが一つあります。それはコードレビューです。AIコードレビューがどれだけ時間を節約してくれたか言葉では表せません。そしてその大部分は、今日のスポンサーであるGrapileのおかげです。彼らは私が今まで見た中で最高のAIコードレビューを持っています。
そして、彼らがそこに到達した大きな理由は、コードベースを完全に深く理解することです。新しいプロジェクトにGrapileをセットアップすると、全体をインデックス化し、フィードバックを提供する際に使用する理解を構築します。そして、その深い理解は、提供されるコードレビューに本当に表れています。私自身のコードベースでリグレッションやミスをキャッチしている例をたくさんお見せできます。
たとえばここで、SkateベンチでDeepSeek V3.1思考ベンチマークの思考機能が実際にオンになっていないことに気づきました。超役立ちます。正直、私はこれを見逃していて、それがキャッチされました。そして、これは私のチームがレビューしなければならなかったかもしれないミスです。そして今、チームに迷惑をかける前にキャッチされました。真面目な話、AIコードレビューは、同僚に対してできる最も思いやりのあることの一つです。なぜなら、AIが最初にそれらの愚かなミスをキャッチすれば、彼らの時間を無駄にする必要がないからです。
確かに、小さなチームで働く小さな開発者としての私には役立ちますが、Nvidia、PostHog、Storybook、Raycast、さらにはMRAのような大きなチームはどうでしょうか。それらすべてにとって役立つことがわかりました。非常に役立つので、私は彼らに、Grapileが実際のオープンソースプロジェクトで実際のリグレッションをキャッチした実際のPRを示すこのサンプルページを構築するよういじめました。
そして、このページをスクロールして、多くの正当な例を見ることができます。このPostHogのものをクリックしてみましょう。なぜですか。このPRは、BigQueryマージのバッチエクスポートのバグを修正しようとしています。そして、これは問題があることに気づいた変更です。この例外ハンドラは、再送信せずにすべての例外をキャッチします。これにより、マージ後にエラーが静かに隠される可能性があります。
マージ後に例外を再送信して、エラーが適切に伝播されるようにすることを検討してください。または、Raycastからこのランダムなものを選びましょう。GitHubは本当にダウンしていますか。真面目な話、GitHubが独自のコードレビューにGrapileを使用していたら、このような停止が少なくなると思います。何ですか。ええ、撮影中にGitHubが実際にダウンしましたが、それは私の主張を証明しています。
Grapileは、あらゆる種類のサービスで常にリグレッションを防ぎます。そしてねえ、GitHub、もし皆さんがGrapileを試したいなら、私が個人的にサブスクリプションを支払います。なぜなら、今のGitHubのコード品質は受け入れられないからです。チームの時間を無駄にすることなく、より速いフィードバックを得るには、soyv.link/grapileをご覧ください。本当に興奮していると言いましたが、皆さんはこれが私が構築する多くのものをどれほど醜くなくするかを理解していないと思います。
すべてをカスタマイズできます。コンポーネントライブラリ、アイコン、ベースカラー、テーマ、フォントを選択し、他のものと異なるものを構築します。コンポーネントライブラリの作成者がこれほど直接的にこれを指摘しているのを見たことがありますか。shadcnは、おそらく歴史上のあらゆるコンポーネントライブラリの中で最もカスタマイズ可能なオプションでした。なぜなら、コードベースにコードをダンプするので、自分で変更できるからです。
それにもかかわらず、shadcnはここで直接、人々が他のすべてのものと同じように見えるものを構築していると言っています。そして、彼らはそうしないことをはるかに簡単にしています。もはや、コードをコピー&ペーストして触れないということはありません。新しいサイトにアクセスすると、新しいプロジェクトボタンをクリックします。
コンポーネントを表示できますが、プロジェクトを作成できます。そしてこれを行うと、はるかに多くのことができます。ここに素敵な新しいサイドバーがあり、RadixとBase UIの間でベースコンポーネントライブラリを選択できます。プリセットカラースタイルがあります。Vegaがあり、これはクラシックなルックです。Novaは、デフォルトのマージンを減らし、いくつかのボックスラッピングとコーナー半径の動作方法を変更するため、もう少しコンパクトです。
Mayaは、はるかに丸くて柔らかいです。Lyraは、はるかに箱型のルックです。これは、今本当に人気が出ているクラシックなブルータリストルックです。そして、Mirrorは、非常に密度の高いインターフェイス用のコンパクトモードです。これは本当にクールなフレーミング方法です。これが欲しいもののための大まかなものです。
個人的には、最近そのブルータリストルックが大好きです。だから、私はLyraを出発点にします。そして、ベースカラーがあります。ありがたいことに、Tailwindのデフォルトのグレーが嫌いです。ここで見るように、それは青です。Tailwindのグレーはグレーではなく、青です。わかります。グレーは正しく行うのが難しく、過度に使用されていました。そして、多くのもののためのブルーグレーははるかに良く見えますが、私はそれらが嫌いです。本当に本当に嫌いです。
だから、ニュートラルを選びます。ストーンとジンクも本当に良いですが。ストーンは少し茶色がかった外観です。ビデオ圧縮で伝わることを願っています。しかし、ニュートラルに固執します。しかし、テーマカラーがあります。ここが本当に楽しいところです。なぜなら、ピンクを選べるからです。
そして、それらは愚かに見えるかもしれませんが、このようなトップレベルのアクセントテーマカラーを持つことは、UIで物事を本当に目立たせることができます。ここの警告ラベルの箱っぽさは好きではありませんが。他のスタイルはそれをせず、別のルックを持っていると思います。ええ、その通りです。全体的な箱っぽさは好きなので、それに固執します。しかし、フォントがあります。
彼らがまだenterをデフォルトとして使用していることに驚いています。Vercelがクレイジーな独占ではないという証拠が欲しいなら、Vercelにはenterの代替フォントがあります。そして、私は本当にそれが好きです。私はGistを常に使用します。サムネイルに使用します。今日、ストリームの準備をしているときに今日も使用しました。私はこれについて嘘をつくのは好きではありません。なぜなら、私は文字通りこのAffinityプロジェクトを開始する直前に開いていたからです。最近開いたもの1213。
このテキストを選択します。見えますか。Gist。このフォントが大好きです。本当に良いし、オープンソースです。定期的に更新されます。良いフォントです。好きです。しかし、代わりに彼らはenterを使用しています。Gistがこのリストにさえないことに驚いています。ああ、ありますか。しかし、もっと下に。スクロールできることを知りませんでした。
ヒントを差し上げます。ついに、チームに実際のフィードバックを提供できます。これがスクロール可能なリストであることを明確にしてください。なぜなら、これがスクロール可能なリストだとは決して推測しなかったからです。実際、新しいneato sansが好きです。Outfitには、私が好きな奇妙な少し圧縮された外観があります。これが好きです。そして、必要な境界線半径の量を選択できる半径オプションがあります。
待って、それは別のベーススタイルを実行してから、半径をnoneに変更できるということですか。ああ、それは良いです。本当に良いです。とても好きです。今のところLyraに固執していますが、でも、アクセントカラーまたはアクセントスタイルがあり、微妙または大胆にできます。ここのどこにも表示されないと思います。
ああ、ああ、一つ見せました。これは破壊的であることを明確にする必要があります。なぜなら、私がしたことをすべて元に戻したからです。カスタマイズを行った場合、おそらく隠されるべきです。申し訳ありません、私の猫はスタイルについて強い意見を持っています。一度にたくさんのことが起こっています。こんにちは、相棒。彼は肩乗り猫ですが、あまり得意ではありません。
彼は本当にゴロゴロ鳴っています。誰かがMilesがどのモデルを最も好きかと尋ねているのを見ました。彼はGrokの大ファンです。なぜなら、彼はワクチン反対派だからです。公平に言えば、ワクチンが好きな猫はいないと思いますが、彼は本当に好きではありません。私の冗談が面白いと思いましたか。彼は今、人生最高の時間を過ごしています。中断前に言っていたように、カスタマイズに時間をかけたばかりのときに全体をランダム化するシャッフルボタンは悪いです。
しかし、元の場所に戻ることができます。それほど遠くありませんでした。痛い、痛い、痛い。バイバイ、相棒。痛い。実際にローズが好きです。Lyraスタイルが本当に好きでした。今ではアイコンセットを変更できるのが大好きです。ここにはhuge iconsがあります。それをそこに表示してくれればいいのにと思いますが、なぜそうしないのか理解できます。これらすべてを収めるのは面倒でしょう。
Lucidアイコンが本当に好きですが、ここにオプションがあり、そのうちのいくつかは本当に良いです。huge iconsを投入しましょう。なぜですか。ええ、これはクールです。そして今、プロジェクトを作成するか、VZで開くことができます。ああ、これをスクロールできます。それは理にかなっています。だから他のものの一部が見えなかったのです。微妙から大胆に変更すると、そこに表示されますか。いいえ。
ええ、それは素晴らしいです。これらすべてのオプションとこれらすべての例をここで見ることができます。これは本当に良いです。欲しい出発点を得るためのこのような素敵な小さな方法です。そしてそこから、AIバイブ開発者であれば、これを取り、プロジェクトに追加すれば、準備完了です。
ここでプロジェクトを作成をクリックできます。そして今、これらすべての値がここで設定された新しいshadcnプロジェクトをスピンアップできます。そして、Next.js、Tanstack Start、Viteのワンクリックがあります。AstroやNuxtのような他のフレームワークがここにない理由を疑問に思っているでしょう。それはすべて非常にReactベースだからです。
Base UIの上に構築されており、これらのプリミティブがコードベースにコピー&ペーストされています。それでは、デモのためにNext.jsビルドを実行しましょう。ご存知のとおり、彼らが最もサポートするものになるでしょう。bunが好きなのでbunを使用します。プロジェクト名はshadcn custom demo。そして、この中を見てみましょう。コンポーネントUI。ここにかなりの数を配置していますが、すべてではありません。サンプルがあります。
lib utilsがあります。そして、カスタマイズの多くはCSSレベルで行われていると思います。すべての色など。ええ、クール。これは良い出発点です。実行したらどのように見えるか見てみましょう。さて、ここで何が起こっているのですか、shad。話をする必要がありますか。タブでのリターンはオプションではありません、お友達。
これらのファイルはすべて正しくフォーマットされていませんか。CSSは正しくフォーマットされています。これらは正しくフォーマットされています。レイアウトは正しくフォーマットされています。ここで何が起こりましたか。しかし、彼らはそれを得ましたか。彼らは得ました。そして今、初期化があります。これについて私が持っている一つの懸念は、プロジェクトを作成するときに、既存のプロジェクトにshadcnをセットアップしているわけではないことです。
新しいものを作成しているので、好きではありません。これを既存のプロジェクトにダンプする方が簡単だったらいいのにと思いますが、十分な数のものに触れていて、Tailwindを設定しているのも理解できます。もはやそれほど単純ではないことを理解しています。これを保存すると、タブが修正されます。そして、bun rundev。どのように見えるか見てみましょう。そして、ここにいます。
すべての設定を持つデモコンポーネント。ああ、クール。これはモーダルの良い例です。ええ、これらのアイコンはあまり好きではありません。huge iconsの人ではないかもしれませんが、これをすべてセットアップするのは簡単です。本当にクールです。ただ、セットアップが完了したら、これがどれほど強力かをデモしたいです。最初にやることは、ボディにダークのためのクラス名をもう一つ追加することです。なぜなら、常にダークモードが欲しいからです。
ああ、ある時点でグレーに切り替わりましたか。ええ、ベースカラーグレー。それは嫌いです。再初期化しています。イライラします。これは、新しいプロジェクトを作成する代わりにプロジェクトで実行できればいいのにと思うもののサンプルの一つです。そして、ええ、ページコンポーネントは同じ問題を解決します。ここに飛び込みます。常にダークにします。はるかに良いです。
今、話しています。今、気分が良くなっています。それでは、これを出発点として使用しましょう。使用するのが好きなテストプロンプトがいくつかあります。よく使用するものの一つは、画像生成スタジオのプロンプトです。これは画像生成スタジオになると言います。美しくすることに焦点を当てます。ダークモードなどを使用します。
このプロジェクトに飛び込みましょう。エージェントモードに切り替えます。まず、よりスマートなモデルを使用することから始めます。5.2を使用します。実際には、複数のモデルを使用して、Composer 1、Opus、5.2を使用します。Gemini 3 Proを投入すべきですか。なぜ提供されたshadcnコンポーネントを利用しないのですか。画像生成用の偽のUIを作成するための画像生成モックスタジオを生成する4つの異なるモデルを持つつもりです。
通常、これは異なるモデルがUIをどのように処理するかを確認するための優れたテストです。しかし今、私はそれらすべてをshadcnプロジェクトであるこのハーネスに入れています。そして、彼らがこれをどのように処理するかを見たいです。また、結果を比較するために、shadcnなしで新しいNext.jsプロジェクトを別途スピンアップします。create next app at latest非shadcn例、推奨デフォルト。クール。gitステータス。
すでにイニシャライズされています。クール。それでは、非shadcnバージョンはTailwindを使用します。なぜなら、プロジェクトにすでにTailwindがあるからです。複数モデル、同じ4つのモデル。これも実行して、shadcnなしとありを比較できるようにします。Composerはすでに最初のパスを終了しているようです。作業ツリーパスをコピー。
ここにcd。bun rundev。bun install。bun run rundev。作業ツリーに入れるのを忘れました。それは面倒でしょう。ここです。そして、これはComposerが作成したものです。醜い悪いモデルは通常UIを作成できません。そして、これは使用可能なUIです。これで問題ありません。これらの小さなセクションのスペーシングの処理方法は好きではありません。
しかし、それ以外は、これは画像生成スタジオのためにこれまで見た中で最悪のUIではまったくありません。比較のために、別のプロジェクト、非shadcnのものでもすでに終了しました。それでは、そこにcdします。bun install、bun rundev。そして、これは、さらに悪く圧縮されているに違いない恐ろしいグラデーションで作成したスロップです。
さて、Chromeではそれほど悪くありませんが、これはクラシックなAIスロップです。ああ神様、このボタンの光。これまで見た中で最悪のものです。ええ。そして、これはUIのものに本当に本当に速く、あまり得意ではないはずのモデルですが、良いテンプレートを渡すと、突然それが本当に得意になります。
さて、より良いモデルがどのように機能するか見てみましょう。それでは、Opus 4.5に飛び込みます。これは、Anthropicの友人からのUIの大幅な改善です。しかし、shadcnのものはどれだけ役立ちますか。よりスマートなモデルが動作するコードを作成するはずだと思っていました。ああ神様、入力が遅れています。インポートされたアイコンが機能していません。
神様、それは粘着キーのことです。ああ神様、それは痛かったです。さて、Gemini 3がどのように機能したか見てみましょう。コードが実行されるかどうか見てみましょう。Install、bun rundev。ええ、Gemini 1は大丈夫です。Geminiは無駄なサイドバーを作るのが大好きです。それは彼の好きなことです。Geminiモデルが無駄なサイドバーを作るのが大好きだと信じていないなら、最近のGoogleの製品を確認すべきです。
無駄なサイドバーへのこの愛は、現在Googleの表面積に深く根付いています。AI Studioのサイドバーが無駄で悪いのは本当に本当に面白いです。AI Studioのサイドバーのすべての癖と失敗について2時間の動画エッセイができると思います。とにかく、それは大丈夫です。しかし、これをshadcnなしでGeminiが作成したものと比較しましょう。
コードを編集することを許可してもよいことを確認する必要があります。それはすべきことだけなのに。なぜコードを編集することを再許可しなければならないのですか。何が起こったのですか。どの設定が壊れましたか。そして、なぜComposerはこれを問題なくできたのですか。一体何が起こっているのですか。さて、終わりました。そして、ここにGemini 3 Proが既存のUIテンプレートなしで生成することを許可されたときのものがあります。かなり良く見えます。
Googleモデルの署名のように無駄なサイドバーがまだありますが。再び、比較するために、ええ、意味のある改善です。しかし、異なります。外観が好きではありません。これもここで嫌いです。最高の言い方は、Gemini 3 Proは本当に魅力的なコンポーネントを作成できます。魅力的なデザインシステムを作成することはできません。
見栄えの良いサイドバーを作成できますが、サイドバーを作成する必要はありません。ただ、出かけて行ってやるだけです。しかし、少なくとも、コンポーネントライブラリを持つことは、それを少しレールに保持します。Opusに戻って比較しましょう。今回はうまくいくことを願っています。コンポーネントまたはインポートを修正することに気づいたかもしれません。
cd、bun install、bun rundev。さあ行きましょう。これはOpus 4.5によって作成されたものです。彼らはここで小さなグラデーションのことをしましたが、このレイアウトでは好きではありません。これらのスペーシングがどのように起こったかも好きではありません。興味深い。これは、コンポーネントライブラリを使用してUIを作成するさまざまなモデルを示すだけで、すべてが良く見えるようになる確実な勝利になることを期待していました。
Cursorは、GPT 5.2のものがこれらの中で最高だと考えているようです。だから、それを見るのは楽しみです。しかし、私のデザインシステムなしでOpusを比較しましょう。美しいです。なぜOpusはフォントを適切にインポートできないのですか。時々本当に最悪です、男。そして明らかにGPT5はまだ進行中です。ああ、それで編集を確認しに行かなければなりません。
待って、なぜそれはnext envに触れているのですか。このボトルは自動的に生成されます。タイプが正しいことを確認します。触らないでください。何をしているのですか。時々AIが嫌いです、男。GPT 5.2がこれらすべてをどのように処理したか見てみましょう。ああ、待って。これがロードされました。さて、Opus、あなたの勝利を得ることができます。CSSの書き方を知らないかもしれませんが、少なくとも本当に素敵に見えるものを作りました。
これはランディングページのように感じますが、生成を押すと、新しいUIを作成しますか。さて、それがフォールドの下にあるのは好きではありません。しかし、これは本当にクールに見えます。それは異なります。これは上下に浮いていますか。はい、そうです。非常にゆっくりと、これは上下に浮いています。功績を認めます。良い仕事をしました。
しかし、見たかったのはshadcnデモです。なぜなら、それが私たちがここにいる理由だからです。bun install。bun rundev。そして、これは5.2でのshadcnデモです。それは最後のものになります。なぜなら、shadcnのものなしで同じものを見せるつもりだからです。同じ間違いを犯しましたか。同じ間違いを犯しました。私はこれをhuge iconsのせいにします。
すべてのモデルがそれを幻覚しているなら、それはhuge iconsです。それで、shadcnのものに関する最初のアドバイスです。バイブコーディングをする場合は、huge iconsパックを使用しないでください。それを正しく使用する方法を知りません、そうですか。クール。さて、それをやっている間、非shadcnの例を見てみましょう。これは非shadcnでの5.2です。
圧縮されたUIを作成しました。ここには多くの情報があります。ここで美しいデフォルトのためのチューンのようにタイトルをラップする方法は好きではありませんが、ほとんどの場合かなり良いです。個人的には、Claudeから見たばかりのUIをより高くランク付けすると思います。Opusのものは本当に良かったですが、shadcnでのGPT 5.2生成が完了したら、見るべき素敵なものがあるはずです。
ええ、これはあるべきものに対してあまりにも忙しいUIです。GPT 5.2体験。インポートされたアイコンを変更するのにそれだけの時間がかかり、UIのアイコンは実際にはまだ変更されていません。ねえ、カーソルの友人たち、一体何をしているのですか。UIバグ。この続きを読むボタンは、テキストの残りを表示しません。すべてのテキストを繰り返します。
いいえ、そうではありません。これは要約です。これは要約です。これは全体です。非常に多くの重複があります。それはただの何ですか。何ですか。くそったれ。これは20分かかりますか。何てことだ。これらの修正を行うためにより速いモデルを使用しますが、5.2を使用しているという点が公平なテストをしていないことになります。
私は苦しんでいます。そして、GPT 5.2が基本的なタスクを実行するのにかかる時間で、それほど厄介ではないモデルをトレーニングできます。1つのアイコン変更にまだ進行していますか。冗談です。手動でコードを書いています。いいえ、簡単にこれにアクセスできないので、書いていません。くそったれ。さて、手動で修正しました。それは良いUIです。5.2。
コンポーネントライブラリを与えられたときに、まともな見た目のUIを作成する方がはるかに良いパフォーマンスを発揮しました。それはクールです。ここに到達するのは面倒でしたか。ええ。しかし、繰り返しますが、これは実際に興味深いモデルショーケースになりました。UIが苦手なモデルをコンポーネントライブラリを与えることでまともにすることができます。
UIが得意なモデルをコンポーネントライブラリを与えることで少し悪くすることができます。そして、指示に従うのが得意なモデルを良いUIを作成させることができます。なぜなら、それができることだけだからです。ええ、これは素敵です。ここの微妙なグラデーションが好きです。赤の使い方が好きです。
ここのセクションがとても好きです。履歴は実際に意味のある量のコンテキストを提供していて、クリックすると意味のあることをします。これは良いです。良いモックです。少し考え抜かれています。Cursorのエージェントがすべてをレビューしてこれを選択したとき、これが好まれた理由がわかります。まだ大変な経験でした。
嘘はつきません。ただ、Lucidやトレーニングデータでより一般的に使用されている他のアイコンパックを使用していれば、これはもっとうまくいったと本当に信じています。ビデオを締めくくる前に、クールな新しいshadcnカスタマイズのことについて話したいことがもう一つあります。Sahage、なぜ私をフォローしているこのランダムな人を持ち出しているのですか。彼が作成したもののためです。
これはTweak CNです。Tweak CNは、完璧なshadcn UIテーマを作成するための簡単な方法で、本当に本当にクールでした。彼のサイトを使用して、さまざまな色を選択するのが簡単になりました。プライマリとプライマリフォアグラウンドのために、さまざまなアクセント用にTailwindカラーから直接選択できます。
使用できるさまざまな色、タイポグラフィ。多くのオプションがあります。さまざまなサンセリフフォントとセリフフォントとモノスペースフォントを選択できます。実行できる他のHSL調整があるか、やってほしいことのアイデアを与えると、それを生成します。実際に本当に本当にクールで、その理由の一部は、彼が現在Vercelで働いているということです。はい、彼は現在Vercelにいます。
彼は最初にTweak CNを作成しました。彼らは彼をV0に連れてきたので、このカスタマイズの多くを取り込み、V0に埋め込むことができます。私の顔が覆っているこの角の小さなボタンを見ることができます。V0で開きます。それは天才的なアイデアです。これらすべてをカスタマイズし、V0に持ち込んで、その周りにUIを構築できるという概念は素晴らしいです。
それはとてもクールです。必要なスタイルに見えるようにして、それでアプリケーションを作成したい場所に持っていくことができます。実際のソフトウェアでまだデザインしている人のためのエクスポートとFigmaボタンさえあります。色も変更し、ここで変更すると、サイト全体で変更されます。本当にクールです。プライマリカラーを選択したため、ホームページを読めなくしました。背景に対して十分に明るくありませんでした。yellow 200を選択してホームページに移動します。見てください。ここで変更を加えると、サイト全体のテーマが変更されるのは本当にクールだと思います。Tweak CNと、shadcnに組み込まれた新しいカスタマイズとの間に正式な重複があるかどうかはわかりません。
Sahageがそれに関与したか、関与していなかったかのどちらでも驚かないでしょうが、明らかにインスパイアされています。これは長い間来るべきものであり、それがどこまで行ったか、どれだけ速く行ったかを見るのは非常にクールです。Vercelのものに超強く結びついていないのを見るのは本当にクールです。トップレベルのフォントの一つとしてさえGistを含めていませんが、代わりにたくさんのオプションを提供しています。
Next.jsだけでなく、多くの異なるフレームワークをサポートしているのを見るのは本当にクールです。相棒、撮影を終わらせてもらえますか。もうすぐです。ええ、至る所に猫の毛が飛んでいます。この部屋を猫の毛のない状態に保とうとしましたが、CO2レベルが狂気的なレベルだったので、換気しなければなりませんでした。そして、ドアが開くとすぐに、Milesが入ってきます。
言っていたように、shadcnが純粋にVercelのものへのファネルとして使用されていないことが本当に好きです。他のフレームワークのサポート、他のツールキットのサポート、他のシステムのサポート、Figmaのサポート。これらすべてが、エコシステム全体にとって良いことです。そして、shadcnがAI時代に取り残されていないことが本当に嬉しいです。
他の多くのコンポーネントライブラリが脇に置かれているのを見てきました。一方、shadcnは進化し続けています。shadcnの目標は常に、本当に良い出発点で自分のコンポーネントを所有することをできるだけ簡単にすることでした。そして今、欲しい出発点でそれを取得することがさらに簡単になりました。
これは、コンポーネントエコシステム全体にとって大きな変化を表しています。そして、いつものように、shadcnチームとshad自身がエコシステム全体のバーをレベルアップしているように感じます。その結果、ウェブサイトが良く見え始めるでしょう。そして、それが本当に楽しみです。皆さんはどう思いますか。私はこれらの変更を過大評価していますか、それとも本当にエキサイティングですか。皆さんがどう感じているか気になります。そして、次回まで、ピースナーズ。
コメント