UIに迷った時に使えるshadcn/uiコンポーネント
結論：Drawer
なぜDrawerなのか
スマートフォンでの操作が非常に直感的であるため
YouTubeやInstagramのコメント欄は多くの人が利用しているかと思います。
指でスワップするだけで開閉ができ、非常に使いやすいWEBパーツです。
shadcn/uiのDrawerコンポーネントはこれとほぼ同じものを瞬時に実装可能です。
（またtailwind cssでUIカスタマイズも容易です。）
↓ディスコードのユーザープロフィールとかもですね。
とにかく触ってみると、「あ、これいいな」って感じる方が多いと思います。
個人的に クリックよりスワップで操作できる（どちらもできるのが一番ユーザー体験いいかもしれない、、笑）方が使いやすく感じます。
多くのWEBコンテンツと親和性があると考えているため
先ほど述べたYouTubeやInstagramではコメント欄、ディスコードではプロフィール情報、配車アプリのGOでは検索フォーム等々、様々なコンテンツでdrawer UIが使われています。
これには割としっくりくる理由があると考えていて、 独立してかつ、on/offの特性を持つUIはdrawerが強いんじゃないかと思います。
drawerの特性はなんと言ってもスワップで楽にコンテンツの表示、非表示を切り替えられる点です。
そこで、コメント・プロフィール・検索などの「独立していて、ユーザーが一旦立ち寄るけど（on）またすぐ立ち去る（off)UI」にはdrawerは最適です。
個人的にはもう全部これでいいじゃん！くらい気に入っています笑
逆にユーザーが立ち寄って（on）なかなか立ち去らない（offらない）UIには向いていないとは思います。
（例えば地図・記事・動画・等のコンテンツ。特にそのアプリでユーザーによく使ってもらいたいメインコンテンツ）
表現が難しいですが、drawerにすることでサブコンテンツ感が出てしまうのと、単純に画面幅いっぱいコンテンツを見せることができないからです。
またdrawerの強みである、楽なスワップも無駄になります。
利用時の注意点
以下はdrawerのソースコードです。これをみると、あ、ここいらないなーとかtitleいらないから消して自分で作ろう！とかはしない方がいいです。
というのも、shadcn/uiはアクセシビリティも担保してくれているためです。デフォルトのものを利用しないとこの機能が失われ、アクセシビリティが下がります。
デフォルトのものとなるだけUIを合わせる努力が必要です。
<Drawer>
<DrawerTrigger>Open</DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Are you absolutely sure?</DrawerTitle>
<DrawerDescription>This action cannot be undone.</DrawerDescription>
</DrawerHeader>
<DrawerFooter>
<Button>Submit</Button>
<DrawerClose>
<Button variant="outline">Cancel</Button>
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>
終わり
ここのUIどうしようか、、と考えることがあったらshadcn/uiのdrawerを一度検討してみるとよいUIを実現できるかもしれないです。
（ほぼ自分の感想ですが、、、笑）