통계블록
통계와 지표를 보여 주는 컴포넌트. 네오브루탈리즘 스타일의 바로 쓰는 React UI 블록입니다. 히어로, 가격, 인증, 대시보드 등. 모든 화면 크기를 미리 보고, 코드를 복사하거나 MCP 서버를 통해 AI 에이전트로 설치할 수 있습니다. Radix UI, Base UI, React Aria와 함께 동작합니다.
- Hero, 가격 & 인증
- 모든 중단점을 미리 보기
- 소스 복사하기
- MCP 설치 준비 완료
- Radix · Base UI · React Aria
- 158 기성 블록
- 제공되는 페이지 섹션
- 대시보드 및 마케팅
- Pro 암호를 해제합니다
- 드롭인 레이아웃
모든 레이아웃 보기
통계
9 블록 — 아무 카드나 클릭하여 전체 화면 미리보기, 코드 및 설치 단계 확인.
- 01Pro
영역 차트 통계
7일간의 매출·비용 영역 차트가 누적 합계와 증감 배지를 하나의 카드에 담고, 그 아래 네 가지 수치가 이어집니다. React와 Tailwind: trend 배열만 교체하세요.
- 02Pro
벤토 통계 보드
두 개의 좁은 성장 카드가 드릴다운 링크로 끝나고, 그 옆에는 헤드라인 수치를 담은 두 배 너비의 브랜드 카드가 놓입니다. React와 Tailwind: 링크를 리포트로 연결하세요.
- 03Pro
컴팩트 아이콘 통계 행
이 세트에서 가장 짧은 통계 스트립: 아이콘 타일, 수치, 두 단어 라벨로 이루어진 카드 네 개. React와 Tailwind: 히어로 바로 아래에 넣으세요.
- 04Pro
분할 통계 패널
가장자리까지 채워진 컬러 밴드 안, 세 수치가 2px 룰로 나뉜 하나의 패널을 공유합니다. React와 Tailwind: 카피를 바꾸고 섹션 사이에 넣으세요.
- 05Pro
도넛 차트 통계
만족도 점수가 구멍 안에 직접 표시되는 도넛 차트가, 검은색과 흰색이 번갈아 배치된 카드 네 개에 둘러싸입니다. React와 Tailwind: 배열 하나에서 비율만 바꾸세요.
- 06Pro
CTA가 있는 통계 모자이크
한쪽에는 제안, 다른 쪽에는 증거: 헤딩과 두 버튼이 길고 짧은 타일이 섞인 모자이크 옆에 놓입니다. React와 Tailwind: 필요에 따라 타일 비중을 다시 조정하세요.
- 07Pro
추세 화살표 통계
각 카드는 원형 추세 화살표와 작년 대비 변화 문구를 하나의 공유 기준선에 고정합니다. React와 Tailwind: 각 추세를 위/아래로 설정하세요.
- 08Pro
스토어 지표 대시보드
일간·주간·월간·연간 전환기가 KPI 카드 네 개를 바꾸고, 그 아래 매출 분할과 인기 상품 목록이 이어집니다. React와 Tailwind: figures 객체만 가져오세요.
- 09Pro
하이라이트 통계 카드
블러 처리된 텍스처 위 세 개의 지표 카드 중 정확히 하나만 브랜드 컬러로 채워져 시선이 승자를 고릅니다. React와 Tailwind: highlight 플래그만 옮기세요.