Block Browser

실제 Block Variant를 비교하고, 선택한 구성으로 Playground를 바로 열어보세요.

14개 Block · 전체 목록을 한 화면에서 확인할 수 있습니다.

Header

기업형 Header

header-business

STUDIO

Use

View Source

Source: components/blocks/registry.tsx

Dependencies: button

import { blockRegistry } from "@/components/blocks/registry";

// Source: components/blocks/registry.tsx
const Block = blockRegistry["header-business"].component;
<Block preset="business" />

Header

제품형 Header

header-product

NOVA

Use

View Source

Source: components/blocks/registry.tsx

Dependencies: button

import { blockRegistry } from "@/components/blocks/registry";

// Source: components/blocks/registry.tsx
const Block = blockRegistry["header-product"].component;
<Block preset="business" />

Hero

중앙 CTA Hero

hero-centered

신뢰를 쌓는 디지털 파트너

기업의 다음 성장을 함께 설계합니다.

실제 서비스처럼 보이는 블록 조합을 바꾸고, 마음에 드는 구성을 프로젝트에 바로 적용하세요.

Use

View Source

Source: components/blocks/registry.tsx

Dependencies: button

import { blockRegistry } from "@/components/blocks/registry";

// Source: components/blocks/registry.tsx
const Block = blockRegistry["hero-centered"].component;
<Block preset="business" />

Hero

분할형 Product Hero

hero-split

팀을 위한 솔루션

일이 흐르는 방식부터 바꾸세요.

명확한 정보와 행동을 한 화면에 담는 제품 중심 구성을 제공합니다.

Use

View Source

Source: components/blocks/registry.tsx

Dependencies: button

import { blockRegistry } from "@/components/blocks/registry";

// Source: components/blocks/registry.tsx
const Block = blockRegistry["hero-split"].component;
<Block preset="business" />

Hero

간결한 Hero

hero-minimal

업데이트됨

필요한 정보에 빠르게 도달하세요.

문서, 관리 화면, 커뮤니티처럼 정보 밀도가 높은 서비스에 맞춘 간결한 시작 영역입니다.

Use

View Source

Source: components/blocks/registry.tsx

Dependencies: none

import { blockRegistry } from "@/components/blocks/registry";

// Source: components/blocks/registry.tsx
const Block = blockRegistry["hero-minimal"].component;
<Block preset="business" />

Features

기능 Grid

features-grid

빠른 설정

필요한 정보를 이해하기 쉽게 정리합니다.

명확한 구조

필요한 정보를 이해하기 쉽게 정리합니다.

재사용 가능한 블록

필요한 정보를 이해하기 쉽게 정리합니다.

Use

View Source

Source: components/blocks/registry.tsx

Dependencies: none

import { blockRegistry } from "@/components/blocks/registry";

// Source: components/blocks/registry.tsx
const Block = blockRegistry["features-grid"].component;
<Block preset="business" />

Features

지표 중심

features-stats

98%

완료율

24시간

응답 시간

12개

진행 중 업무

Use

View Source

Source: components/blocks/registry.tsx

Dependencies: none

import { blockRegistry } from "@/components/blocks/registry";

// Source: components/blocks/registry.tsx
const Block = blockRegistry["features-stats"].component;
<Block preset="business" />

Content

Card Grid

content-cards

대표 콘텐츠

프로젝트 시작하기

간결한 설명을 보여주는 콘텐츠입니다.

팀을 위한 작업 공간

간결한 설명을 보여주는 콘텐츠입니다.

다음 단계 준비

간결한 설명을 보여주는 콘텐츠입니다.

Use

View Source

Source: components/blocks/registry.tsx

Dependencies: card

import { blockRegistry } from "@/components/blocks/registry";

// Source: components/blocks/registry.tsx
const Block = blockRegistry["content-cards"].component;
<Block preset="business" />

Content

목록형 Content

content-list

대표 콘텐츠

프로젝트 시작하기

업데이트됨 · 오늘

팀을 위한 작업 공간

업데이트됨 · 오늘

다음 단계 준비

업데이트됨 · 오늘

Use

View Source

Source: components/blocks/registry.tsx

Dependencies: none

import { blockRegistry } from "@/components/blocks/registry";

// Source: components/blocks/registry.tsx
const Block = blockRegistry["content-list"].component;
<Block preset="business" />

Content

Data Table

content-table

최근 활동

프로젝트 시작하기

업데이트됨 · 오늘

완료

팀을 위한 작업 공간

업데이트됨 · 오늘

완료

다음 단계 준비

업데이트됨 · 오늘

완료

Use

View Source

Source: components/blocks/registry.tsx

Dependencies: table

import { blockRegistry } from "@/components/blocks/registry";

// Source: components/blocks/registry.tsx
const Block = blockRegistry["content-table"].component;
<Block preset="business" />

CTA

중앙 CTA

cta-primary

지금 원하는 구성을 선택하세요.

Use

View Source

Source: components/blocks/registry.tsx

Dependencies: button

import { blockRegistry } from "@/components/blocks/registry";

// Source: components/blocks/registry.tsx
const Block = blockRegistry["cta-primary"].component;
<Block preset="business" />

FAQ

FAQ 목록

faq-simple

자주 묻는 질문

이 조합을 공유할 수 있나요?

실제 프로젝트에 적용할 수 있나요?

Use

View Source

Source: components/blocks/registry.tsx

Dependencies: accordion

import { blockRegistry } from "@/components/blocks/registry";

// Source: components/blocks/registry.tsx
const Block = blockRegistry["faq-simple"].component;
<Block preset="business" />

Footer

컬럼 Footer

footer-columns

Use

View Source

Source: components/blocks/registry.tsx

Dependencies: none

import { blockRegistry } from "@/components/blocks/registry";

// Source: components/blocks/registry.tsx
const Block = blockRegistry["footer-columns"].component;
<Block preset="business" />

Footer

간결한 Footer

footer-minimal

Use

View Source

Source: components/blocks/registry.tsx

Dependencies: none

import { blockRegistry } from "@/components/blocks/registry";

// Source: components/blocks/registry.tsx
const Block = blockRegistry["footer-minimal"].component;
<Block preset="business" />