2025 年 10 月 - 新しいコンポーネント

スピナー、Kbd、ボタングループ、入力グループ、フィールド、項目、および空のコンポーネント。

このコンポーネントのラウンドでは、私たちが毎日構築しているもの、何度も再構築している退屈なものを検討し、実際に使用できる再利用可能な抽象化を作成しました。

これらのコンポーネントは、Radix、Base UI、React Aria など、あらゆるコンポーネントライブラリで動作します。コピーしてプロジェクトに貼り付けます。

スピナー: 読み込み状態を示すインジケーターです。
Kbd: キーボードのキーまたはキーのグループを表示します。
ボタングループ: アクションボタンや分割ボタンをまとめるグループです。
入力グループ: アイコンやボタン、ラベルなどを入力欄に追加できます。
フィールド: 1 つのコンポーネント。すべてのフォーム。
アイテム: アイテムやカードなどのリストを表示します。
空: 空の状態に使用します。

スピナー

それでは、最も簡単なもの、スピナー と Kbd から始めましょう。かなり基本的なものです。私たちは皆、それらが何をするか知っています。

スピナーをレンダリングする方法は次のとおりです。

import { Spinner } from "@/components/ui/spinner"

<Spinner />

以下にその様子を示します。

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

ボタンでは次のようになります。

import { Button } from "@/components/ui/base/button"
import { Spinner } from "@/components/ui/base/spinner"

コードを編集して、独自のスピナーに置き換えることができます。

import { cn } from "cn"
import { LoaderIcon } from "lucide-react"

Kbd

Kbd はキーボードのキーをレンダリングするコンポーネントです。

import { Kbd, KbdGroup } from "@/components/ui/kbd"

<Kbd>Ctrl</Kbd>

KbdGroup を使用して、キーボードのキーをグループ化します。

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>

⌘⇧⌥⌃Ctrl+B

import { Kbd, KbdGroup } from "@/components/ui/base/kbd"

export function KbdDemo() {

これをボタン、ツールチップ、入力グループなどに追加できます。

ボタングループ

ボタングループについては、多くのリクエストをいただきました。これは、関連するボタンを一貫したスタイルでグループ化するコンテナです。アクショングループや分割ボタンなどに最適です。

"use client"

import * as React from "react"

コードは次のとおりです。

import { ButtonGroup } from "@/components/ui/button-group"

<ButtonGroup>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup>

ボタングループをネストして、間隔をあけてより複雑なレイアウトを作成できます。

<ButtonGroup>
  <ButtonGroup>
    <Button>Button 1</Button>
    <Button>Button 2</Button>
  </ButtonGroup>
  <ButtonGroup>
    <Button>Button 3</Button>
    <Button>Button 4</Button>
  </ButtonGroup>
</ButtonGroup>

ButtonGroupSeparator を使用して分割ボタンを作成します。古典的なドロップダウンパターン。

"use client"

import {

これを使用して、接頭辞または接尾辞のボタンやテキストを入力に追加することもできます。

"use client"

import * as React from "react"

<ButtonGroup>
  <ButtonGroupText>Prefix</ButtonGroupText>
  <Input placeholder="Type something here..." />
  <Button>Button</Button>
</ButtonGroup>

入力グループ

入力グループを使用すると、アイコンやボタンなどを入力に追加できます。ご存知のとおり、入力周りに常に必要となるこれらすべての小さな部分です。

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"

<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

アイコン付きのプレビューは次のとおりです。

import {
  CheckIcon,
  CreditCardIcon,

入力グループにボタンを追加することもできます。

https://

"use client"

import * as React from "react"

またはテキスト、ラベル、ツールチップなど...

USD

https://

.com

@company.com

残り120文字

import {
  InputGroup,
  InputGroupAddon,

また、テキストエリアとも連携できるため、多くのノブやダイヤル、または別のプロンプトフォームを備えた非常に複雑なコンポーネントを構築できます。

1行目, 1列目

script.js

import {
  IconBrandJavascript,
  IconCopy,

ああ、スピナーを使ったクールなものをいくつか紹介します。

保存中...

しばらくお待ちください...

import { LoaderIcon } from "lucide-react"

import {

フィールド

本当に複雑なフォームを構築するためのコンポーネントである フィールド を紹介します。ここの抽象化は美しいです。

正しく理解するまでに長い時間がかかりましたが、Server Actions、React Hook Form、TanStack Form、Bring Your Own Form など、すべてのフォームライブラリで動作するようにしました。

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/components/ui/field"

以下に入力を含む基本的なフィールドを示します。

<Field>
  <FieldLabel htmlFor="username">Username</FieldLabel>
  <Input id="username" placeholder="Max Leiter" />
  <FieldDescription>
    Choose a unique username for your account.
  </FieldDescription>
</Field>

import {
  Field,
  FieldDescription,

すべてのフォームコントロールで動作します。入力、テキストエリア、選択、チェックボックス、ラジオ、スイッチ、スライダーなど、何でもあります。完全な例を次に示します。

import { Button } from "@/components/ui/base/button"
import { Checkbox } from "@/components/ui/base/checkbox"
import {

いくつかのチェックボックスフィールドを次に示します。

デスクトップに表示する項目

デスクトップに表示したい項目を選択してください。

ハードディスク

外部ディスク

CD、DVD、iPod

接続中のサーバ

デスクトップと書類フォルダを同期

デスクトップと書類フォルダはiCloud Driveと同期されています。他のデバイスからもアクセスできます。

import { Checkbox } from "@/components/ui/base/checkbox"
import {
  Field,

FieldGroup および FieldSet を使用してフィールドをグループ化できます。複数セクションのフォームに最適です。

<FieldSet>
  <FieldLegend />
  <FieldGroup>
    <Field />
    <Field />
  </FieldGroup>
</FieldSet>

住所情報

商品の配送先として住所が必要です。

import {
  Field,
  FieldDescription,

レスポンシブにするのは簡単です。orientation="responsive" を使用すると、コンテナの幅に基づいて垂直レイアウトと水平レイアウトが自動的に切り替わります。それだけです。

import { Button } from "@/components/ui/base/button"
import {
  Field,

待ってください。さらに続きがあります。フィールドを FieldLabel でラップして、選択可能なフィールドグループを作成します。本当に簡単です。見た目も素晴らしいです。

コンピューティング環境

クラスターで使用するコンピューティング環境を選択してください。

Kubernetes

K8sクラスターでGPUワークロードを実行します。

仮想マシン

クラスターにアクセスしてGPUワークロードを実行します。

import {
  Field,
  FieldContent,

アイテム

これは、ほぼすべての種類のコンテンツを格納できる単純なフレックスコンテナです。

これを何度も構築したので、コンポーネントを作成することにしました。今ではいつも使っています。アイテムやカードなどのリストを表示するために使用します。

import {
  Item,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"

基本的な項目は次のとおりです。

<Item>
  <ItemMedia variant="icon">
    <HomeIcon />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Dashboard</ItemTitle>
    <ItemDescription>Overview of your account and activity.</ItemDescription>
  </ItemContent>
</Item>

基本項目

タイトルと説明を持つシンプルなアイテムです。

プロフィールが確認されました。

import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"

import { Button } from "@/components/ui/base/button"

アイテムにはアイコン、アバター、または画像を追加できます。

セキュリティアラート

不明なデバイスからの新しいログインを検知しました。

import { ShieldAlertIcon } from "lucide-react"

import { Button } from "@/components/ui/base/button"

Evil Rabbit

最終ログイン: 5か月前

CNLRER

チームメンバーはいません

このプロジェクトで共同作業するためにチームを招待しましょう。

import { Plus } from "lucide-react"

import {

ItemGroup を使用した項目のリストは次のようになります。

shadcn

shadcn@vercel.com

maxleiter

maxleiter@vercel.com

evilrabbit

evilrabbit@vercel.com

import * as React from "react"
import { PlusIcon } from "lucide-react"

リンクとして必要ですか? asChild プロパティを使用します。

<Item asChild>
  <a href="/dashboard">
    <ItemMedia variant="icon">
      <HomeIcon />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>Dashboard</ItemTitle>
      <ItemDescription>Overview of your account and activity.</ItemDescription>
    </ItemContent>
  </a>
</Item>

ドキュメントを見る

コンポーネントの使い方を学びましょう。

外部リソース

セキュリティ属性を設定して新しいタブで開きます。

import { ChevronRightIcon, ExternalLinkIcon } from "lucide-react"

import {

空

さて、最後のもの: 空。これを使用して、アプリ内に空の状態を表示します。

import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"

使い方は次のとおりです。

<Empty>
  <EmptyMedia variant="icon">
    <InboxIcon />
  </EmptyMedia>
  <EmptyTitle>No messages</EmptyTitle>
  <EmptyDescription>You don't have any messages yet.</EmptyDescription>
  <EmptyContent>
    <Button>Send a message</Button>
  </EmptyContent>
</Empty>

プロジェクトはまだありません

まだプロジェクトを作成していません。最初のプロジェクトを作成して始めましょう。

詳細を見る

import { IconFolderCode } from "@tabler/icons-react"
import { ArrowUpRightIcon } from "lucide-react"

アバターと一緒に使用できます。

ユーザーはオフラインです

このユーザーは現在オフラインです。メッセージを残して通知するか、後でもう一度お試しください。

import {
  Avatar,
  AvatarFallback,

または、検索結果やメール購読などの入力グループを使用します。

404 - ページが見つかりません

お探しのページは存在しません。以下から必要な情報を検索してみてください。

/

お困りですか？サポートに問い合わせる

import { SearchIcon } from "lucide-react"

import {

それでおしまい。 7 つの新しいコンポーネント。すべてのライブラリで動作します。プロジェクトの準備は完了です。

On This Page

スピナー Kbd ボタングループ入力グループフィールドアイテム空

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

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

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

2025 年 10 月 - 新しいコンポーネント

スピナー#

Kbd#

ボタングループ#

入力グループ#

フィールド#

アイテム#

空#

スピナー

Kbd

ボタングループ

入力グループ

フィールド

アイテム

空