2023年12月 - 新しいコンポーネント

カルーセル、ドロワー、ページネーション、サイズ変更可能、Sonner、および CLI の更新。

新しいコンポーネントを shadcn/ui に追加し、CLI に多くの改善を加えました。

新機能の概要を以下に示します。

モーション、スワイプジェスチャ、キーボードサポートを備えたフル機能のカルーセルコンポーネントを追加しました。 Embla Carousel の上に構築されています。

無限ループ、自動再生、垂直方向などをサポートしています。

import * as React from "react"

import { Card, CardContent } from "@/components/ui/base/card"

ああ、ドロワーコンポーネントです。 emilkowalski によって Vaul の上に構築されました。

モバイルで次のドロワーを開いてみてください。すごいですね！

"use client"

import * as React from "react"

ページナビゲーション、前ボタンと次ボタンを備えたページネーションコンポーネントを追加しました。シンプルかつ柔軟で、フレームワークの <Link /> コンポーネントと連携します。

import {
  Pagination,
  PaginationContent,

この <Resizable /> コンポーネントを使用して、サイズ変更可能なパネルグループとレイアウトを構築します。

コンポーネント resizable-demo-with-handle が見つかりません。

<Resizable /> は、bvaughn による react-resizable-panels を使用して構築されています。マウス、タッチ、キーボードをサポートしています。

emilkowalski によるもう 1 枚。最後に必要となるトーストコンポーネントです。 Sonner が shadcn/ui で利用できるようになりました。

コンポーネント sonner-demo が見つかりません。

これは最も要望の多かった機能の 1 つです。カスタム Tailwind プレフィックスを構成できるようになり、コンポーネントを追加するときに CLI がユーティリティクラスに自動的にプレフィックスを付けます。

これは、Docusaurus、Nextra などの他のプロジェクトに shadcn/ui コンポーネントを簡単に追加できることを意味します。

<AlertDialog className="tw-grid tw-gap-4 tw-border tw-bg-background tw-shadow-lg" />

cn、cva、および CSS 変数で動作します。

CLI は tailwind.config.ts を検出し、TypeScript バージョンの構成を追加できるようになりました。

それでおしまい。楽しい休日をお過ごしください。

On This Page

shadcn/uiアプリをVercelにデプロイ

OpenAI、Sonos、Adobeなどに採用されています。

Vercelは、アプリや機能を大規模にデプロイするためのツールとインフラを提供します。