기능 소개블록
제품의 기능과 장점을 보여 줍니다. 네오브루탈리즘 스타일의 바로 쓰는 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
테두리 서비스 기능 행
카드도 채우기도 없이, 원형 아이콘 타일이 hover 시 셀이 따뜻해지며 평평해지는 세 개의 구분된 셀입니다. React와 Tailwind — 페이지 하단에 어울릴 만큼 차분합니다.
- 04Pro
센터 통계 기능 카드
전체 너비 색상 띠 위의 가운데 패널 하나에 아이콘 배지, 문구, 통계 카드 세 개, 버튼이 담깁니다. React와 Tailwind — 흐름의 쉼표로 사용하세요.
- 05Pro
코드 프리뷰 기능 분할
터미널로 증명합니다: 재생되는 배포 로그와 오프셋 블록 위의 업타임 타일 두 개 옆에 구분선으로 나뉜 기능 세 가지가 있습니다. React와 Tailwind — 실제 출력을 붙여 넣으세요.
- 06Pro
아이콘 카드 기능 트리오
옅게 물든 띠 위의 동등한 카드들, 각각 원형 아이콘 타일과 모서리에 잘려 들어간 회전된 정사각형이 있습니다. React와 Tailwind — 표면 쌍마다 색을 바꾸세요.
- 07Pro
지표 띠 기능 섹션
고대비 띠 위에서 두 줄짜리 주장이 2x2 그리드의 지표 카드 네 개 옆에 놓이며, 클릭할 것은 없습니다. React와 Tailwind — 섹션 사이에 배치하세요.
- 08Pro
모바일 앱 기능 목록
결과로 서술된 혜택 행 세 개와 오프셋 그림자가 있는 헤드라인, 행동 유도 요소 두 개 옆에 폰 목업이 있습니다. React와 Tailwind — 새 목업을 내보내세요.
- 09Pro
폰 목업 기능 그리드
가운데 폰 목업 양옆에 카드 네 개가 있고, 각각 자체 전체 너비 버튼으로 끝나며 장식은 대각선으로 배치됩니다. React와 Tailwind — 개수는 짝수로 유지하세요.
- 10Pro
스택 카드 기능
전체 화면 색상 띠 위 아이콘 행이 주장을 펼치고, 겹쳐진 증거 카드 콜라주가 그에 답합니다. React와 Tailwind — 히어로 아래에 배치하세요.
- 11Pro
태그된 기능 카드 그리드
각각 하나의 링크인 카드 여섯 개가 카테고리로 태그되고, hover 시 화살표가 미끄러지는 푸터 바로 마무리됩니다. React와 Tailwind — 여섯 개나 열두 개로 작성하세요.