Box

콘텐츠를 올려 두는 아크릴 시트. 라이브러리에서 가장 단순한 표면이며, 하는 일은 묶는 것뿐입니다.

import { Box } from 'neba';

<Box>내용</Box>;

제목·푸터·구분선처럼 구조가 있는 것은 Card의 몫입니다. Card는 그 섹션들이 배치된 Box입니다.

Props

Prop	타입	기본값	설명
variant공통	'solid' | 'outline' | 'text'	'outline'	표면의 무게. 시트는 염색되지 않으며, solid와 outline은 불투명도와 하이라인으로 갈립니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	모서리 반경과 안쪽 여백. 높이도 글자 크기도 건드리지 않습니다
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	의미론적 색 역할. 표면은 흰색이므로 하이라인에만 나타납니다 (solid에는 테두리가 없어 보이지 않습니다)
density공통	'default' | 'compact'	'default'	여백만 바꿉니다. 높이와 글자 크기는 그대로
elevation공통	0 | 1 | 2 | 3	0	그림자 깊이. variant가 text면 무시됩니다
padded	boolean	true	안쪽 여백. 이미지·표처럼 가장자리까지 채우는 콘텐츠는 끄세요
render	useRender.RenderProp	—	div 대신 다른 요소로 렌더링합니다. Base UI의 render prop 그대로
children	ReactNode	—	박스에 담기는 내용

<div>의 네이티브 속성은 그대로 전달됩니다(color 제외).

예시

변형

solid가 색으로 채우지 않는 것은 TextField와 같은 이유입니다. 박스가 담는 것은 본문, 링크, 버튼, 필드 — 저마다 색을 가진 남의 콘텐츠입니다. 강조색으로 채우면 그 전부에 채움 위 대비 처리가 필요해지는데, 그건 컨테이너가 할 일의 반대입니다.

시트는 아예 염색하지 않습니다. solid와 outline을 가르는 것은 색이 아니라 시트가 머금은 빛의 양(불투명도)과 하이라인의 유무입니다. 자세한 것은 색을 보세요.

import { Box } from 'neba';

export default function BoxVariants() {
  return (
    <div className="grid w-full max-w-2xl grid-cols-1 gap-4 sm:grid-cols-3">
      <Box variant="solid">solid</Box>
      <Box variant="outline">outline</Box>
      <Box variant="text">text</Box>
    </div>
  );
}

text는 표면이 없으므로 elevation도 무시됩니다. 보이지 않는 사각형 둘레에 그림자를 그리는 대신입니다.

색

표면이 흰색이므로 색 계열은 하이라인에만 나타납니다. 그래서 아래 예시는 outline입니다 — 테두리가 없는 solid Box에서는 color가 보이는 변화를 만들지 않습니다.

import { Box } from 'neba';

const COLORS = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'] as const;

export default function BoxColors() {
  return (
    <div className="grid w-full max-w-2xl grid-cols-2 gap-3 sm:grid-cols-3">
      {COLORS.map((color) => (
        <Box key={color} color={color} variant="outline">
          {color}
        </Box>
      ))}
    </div>
  );
}

크기

다른 컴포넌트와 달리 Box의 size는 높이도 타입 스케일도 정하지 않습니다. 박스의 높이는 담긴 것이 정하고, 타이포그래피는 담긴 것이 가져옵니다 — 감싸는 것만으로 같은 문단이 두 크기로 렌더링된다면 곤란합니다. 그래서 여기서 size는 시트의 크기, 즉 모서리 반경과 여백입니다.

import { Box } from 'neba';

const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const;

export default function BoxSizes() {
  return (
    <div className="flex flex-col gap-3">
      <div className="flex flex-wrap items-start gap-3">
        {SIZES.map((size) => (
          <Box key={size} size={size}>
            size {size}
          </Box>
        ))}
      </div>
      <div className="flex flex-wrap items-start gap-3">
        {SIZES.map((size) => (
          <Box key={size} size={size} density="compact">
            compact {size}
          </Box>
        ))}
      </div>
    </div>
  );
}

Elevation

import { Box } from 'neba';

export default function BoxElevation() {
  return (
    <div className="flex flex-wrap items-start gap-5">
      {([0, 1, 2, 3] as const).map((elevation) => (
        <Box key={elevation} variant="solid" elevation={elevation}>
          elevation {elevation}
        </Box>
      ))}
    </div>
  );
}

여백 없이, 다른 요소로

padded={false}는 이미지나 표처럼 가장자리까지 채우는 콘텐츠를 위한 것입니다. render는 Base UI의 render prop 그대로라서, <div> 대신 어떤 요소로든 렌더링할 수 있습니다.

import { Box } from 'neba';

export default function BoxUnpadded() {
  return (
    <Box padded={false} render={<section />} className="w-full max-w-md overflow-hidden">
      <div className="h-20 bg-[var(--neba-primary-soft-press)]" />
      <div className="p-4 text-[0.8125rem]">
        The strip above touches all four edges, because the box is not padded.
      </div>
    </Box>
  );
}