shadcn/ui blocks の Lift Mode

Lift Mode がリリースされた

shadcn/ui blocks に新たに Lift Mode という機能がリリースされました。

https://x.com/shadcn/status/1776302097572806672

新しいブロックモードとしてリフトモードを導入します。
リフトモードを有効にすると、ブロックテンプレートからコンポーネントを「リフト」してコピー＆ペーストできます。
つまり、カード、フォームなど、ブロックテンプレートを構成する小さな部品をコピーできるようになります。
Blocksページにアクセスして、試してみてください。

Lift Mode を試してみる

Blocks のページにアクセスするとトグルボタンが追加されています。

トグルボタンをクリックして Lift Mode を有効にするとダッシュボードの表示が変わり、UI 要素にカーソルをホバーするとクリップボードへのコピーボタンと v0 へアクセスする2つのボタンが表示されます。

クリップボードのコピーボタンをクリックすると、選択した Block のソースコードがコピーされます。

import { Button } from "@/registry/default/ui/button"
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/registry/default/ui/card"

export default function Component() {
  return (
    <Card className="sm:col-span-2">
      <CardHeader className="pb-3">
        <CardTitle>Your Orders</CardTitle>
        <CardDescription className="max-w-lg text-balance leading-relaxed">
          Introducing Our Dynamic Orders Dashboard for Seamless Management and
          Insightful Analysis.
        </CardDescription>
      </CardHeader>
      <CardFooter>
        <Button>Create New Order</Button>
      </CardFooter>
    </Card>
  )
}

v0 のボタンをクリックすると、選択した Block が v0 上で操作が出来るようになります。

関連記事

• shadcn/ui blocks とは