プログレス

タスクが完了するたびに（アップロード、インストール、複数ステップのオンボーディングなど）徐々に埋まっていく細長いバーで、ネオブルータリズム風の枠線と影の表現が施されています。

"use client"

import * as React from "react"

Progress はタスクの完了度を報告します。0 から 100 まで埋まるトラックです。Base UI Progress コンポーネント上に構築し、ネオブルータリストのレシピに沿ってスタイルしています。太い枠線、硬い影、ソリッドな塗りです。

次のような場面で使います：

ファイルのアップロードとダウンロード — バイト単位の確定進捗と、見えるパーセンテージ。
複数ステップのフロー — オンボーディング、チェックアウト、ウィザード。進捗バーで位置を示します。
長時間ジョブ — サーバーから完了を報告するインポート、エクスポート、インストール。

インストール


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/progress.json
npx shadcn@latest add https://neobrutalism.com/r/base/progress.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/progress.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/progress.json

以下の依存関係をインストールします。


pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

以下のコードをコピーして、プロジェクトに貼り付けます。

components/ui/progress.tsx

"use client"

import * as React from "react"
import { Progress as ProgressPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Progress({
  className,
  value,
  ...props
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
  return (
    <ProgressPrimitive.Root
      data-slot="progress"
      className={cn(
        "relative flex h-4 w-full items-center overflow-hidden rounded border-2 bg-background",
        className
      )}
      {...props}
    >
      <ProgressPrimitive.Indicator
        data-slot="progress-indicator"
        className="size-full flex-1 bg-primary transition-all"
        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
      />
    </ProgressPrimitive.Root>
  )
}

export { Progress }

インポートのパスをプロジェクトの構成に合わせて更新します。

使い方

import { Progress } from "@/components/ui/progress"

<Progress value={33} />

コンポジション

ラベルと値付き

ProgressLabel と ProgressValue を使って、ラベルと値を表示します。

import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"
 
;<Progress value={56} className="w-full max-w-sm">
  <ProgressLabel>Upload progress</ProgressLabel>
  <ProgressValue />
</Progress>

Progress
├── ProgressLabel
├── ProgressValue
└── ProgressTrack
    └── ProgressIndicator

使用例

ラベル

ProgressLabel と ProgressValue を使って、ラベルと値を表示します。

Upload progress

import {
  Progress,
  ProgressLabel,

制御

スライダーで制御できるプログレスバーです。

"use client"

import * as React from "react"

RTL

Neobrutalism で RTL を有効にする方法は、RTL 設定ガイドをご覧ください。

تقدم الرفع

"use client"

import * as React from "react"

Progress はコントロールではなく状態インジケータです。フォーカスは取れず、キーボード操作もありません。Base UI は aria-valuemin、aria-valuemax、aria-valuenow 付きの role="progressbar" を描画し、ProgressLabel は aria-labelledby で自動関連付けされます。ラベルなしのバーより、ProgressLabel（または aria-label）を優先し、スクリーンリーダーがパーセンテージだけでなく何が読み込み中かを言えるようにしてください。完了度が不明なときは value={null} を渡し、不定状態に切り替えます。

APIリファレンス

詳しくは Base UI のドキュメントをご覧ください。