요금표블록
플랜을 명확하게 보여 주는 요금표. 네오브루탈리즘 스타일의 바로 쓰는 React UI 블록입니다. 히어로, 가격, 인증, 대시보드 등. 모든 화면 크기를 미리 보고, 코드를 복사하거나 MCP 서버를 통해 AI 에이전트로 설치할 수 있습니다. Radix UI, Base UI, React Aria와 함께 동작합니다.
- Hero, 가격 & 인증
- 모든 중단점을 미리 보기
- 소스 복사하기
- MCP 설치 준비 완료
- Radix · Base UI · React Aria
- 158 기성 블록
- 제공되는 페이지 섹션
- 대시보드 및 마케팅
- Pro 암호를 해제합니다
- 드롭인 레이아웃
모든 레이아웃 보기
요금표
11 블록 — 아무 카드나 클릭하여 전체 화면 미리보기, 코드 및 설치 단계 확인.
- 01Pro
색상 구분 가격 등급
각각 자체 색상 띠로 시작하는 세 등급, 월간·연간 토글, 인셋 기능 패널. React와 Tailwind — 플랜마다 띠 색을 바꾸세요.
- 02Pro
이메일 수집 가격 벤토
행의 절반이 무료 체험 이메일 수집 패널에 할애되고, 그 옆에 압축된 플랜 카드 두 개가 브랜드 캔버스 위에 있습니다. React와 Tailwind — 폼을 연결하세요.
- 03Pro
기능 비교 표
네 개의 플랜을 아홉 개의 기능 행과 대조하는 실제 HTML 표로, 모든 셀이 값, 체크, 엑스 중 하나입니다. React와 Tailwind — 행을 추가하고 키를 채우세요.
- 04Pro
4열 가격표
네 개의 플랜이 내부 구분선으로 하나의 테두리 판에 결합되고, 추천 열이 상단 모서리 밖으로 들어올려져 있습니다. React와 Tailwind — 플랜 하나를 표시하세요.
- 05Pro
무료 체험 플랜 선택기
가격 페이지 다음 단계: 브랜드 패널 위의 라디오 그룹인 두 플랜, 결제 세부 안내 위에. React와 Tailwind — 결제 흐름에 넣으세요.
- 06Pro
일러스트 가격 카드
모든 플랜이 대상을 보여주는 넓은 일러스트로 시작하고, 추천 카드는 행 밖으로 들어올려져 있습니다. React와 Tailwind — 원하는 아트워크로 바꾸세요.
- 07Pro
핵심 기능 가격 카드
플랜 제한과 핵심 기능을 나누는 카드, 반전된 어두운 띠와 미끄러지는 연간 토글. React와 Tailwind — 두 가격 필드를 모두 설정하세요.
- 08Pro
월간·연간 전환 가격표
스위치 하나가 모든 가격을 10개월치 연간 결제로 바꾸며, 반전된 가격 헤더와 대각선 리본이 있습니다. React와 Tailwind — 산수를 확인하세요.
- 09Pro
템플릿 대 맞춤 가격
등급이 아니라 구매냐 의뢰냐: 고정 가격 템플릿 카드가 시작 가격의 맞춤 제작 옆에 있습니다. React와 Tailwind — 통화를 예약하세요.
- 10Pro
FAQ가 있는 3단계 가격표
가운데의 채워지고 리본이 달린 Pro 카드, 그 아래 가격 관련 이의를 해소하는 네 개짜리 FAQ 패널. React와 Tailwind — faqs 배열을 수정하세요.
- 11Pro
2플랜 가격 비교
정확히 두 개의 플랜이 하나의 이어진 결제 토글을 공유하며, Pro 카드가 accent 표면 위에 있어 시선이 그곳에 머뭅니다. React와 Tailwind — 등급 이름을 바꾸세요.