Progress

설치 확인

진행률

1. 목적과 출처

진행률

출처: shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
프로젝트: src/components/ui/progress.tsx
Registry: @adcapsule/progress

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Progress 값
값	모양
0%	x
50%	x
100%	x
얼마나 남았는지 모름 value={null}	x

3. 속성 바꿔 보기

업로드

value

레이블과 값

<Progress value={35}>
  <ProgressLabel>업로드</ProgressLabel>
  <ProgressValue />
</Progress>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/progress

npm 패키지: @base-ui/react
함께 설치: @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

import { Progress, ProgressLabel, ProgressValue } from "@/components/ui/progress"

<Progress value={35}>
  <ProgressLabel>업로드</ProgressLabel>
  <ProgressValue />
</Progress>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

value: 0~100, 모르면 null
ProgressLabel·ProgressValue
레이블이 없으면 aria-label

공통으로 유지할 토큰

accent.solid (채운 막대, --primary)
surface.raised (빈 막대, --muted)
font.size.body (레이블)

Progress

설치 확인

진행률

1. 목적과 출처

진행률

출처: shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
프로젝트: src/components/ui/progress.tsx
Registry: @adcapsule/progress

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Progress 값
값	모양
0%	x
50%	x
100%	x
얼마나 남았는지 모름 value={null}	x

3. 속성 바꿔 보기

업로드

value

레이블과 값

<Progress value={35}>
  <ProgressLabel>업로드</ProgressLabel>
  <ProgressValue />
</Progress>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/progress

npm 패키지: @base-ui/react
함께 설치: @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

import { Progress, ProgressLabel, ProgressValue } from "@/components/ui/progress"

<Progress value={35}>
  <ProgressLabel>업로드</ProgressLabel>
  <ProgressValue />
</Progress>

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿