Box

콘텐츠를 올려 두는 기본 표면입니다. 라이브러리에서 가장 단순한 sheet로, 내용을 묶어 배경에서 분리하는 일만 합니다.

import { Box } from 'neba';

<Box>내용</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	—	박스에 담기는 내용
transition공통	NebaTransition	—	mount 시 한 번 실행되는 등장 애니메이션 (transition="fade"). 트리거나 반복이 필요하면 Animate* 컴포넌트로 감싸세요

color를 제외한 <div>의 native 속성이 그대로 전달됩니다.

제목이나 푸터, 구분선처럼 구조가 필요하면 Card를 쓰세요. Card는 그 섹션들이 배치된 Box입니다.

예시

variant

세 무게 모두 sheet를 색으로 채우지 않습니다. Box가 담는 것은 본문과 링크, 버튼처럼 저마다 색을 가진 콘텐츠이기 때문입니다. solid와 outline을 가르는 것은 색이 아니라 sheet의 불투명도와 테두리 유무입니다. 자세한 내용은 색에 있습니다.

text는 표면이 없으므로 elevation도 무시됩니다.

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>
  );
}

color

표면이 흰색이므로 color는 테두리에만 나타납니다. 아래 예시가 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>
  );
}

size

Box의 size는 높이나 타입 스케일이 아니라 sheet의 크기, 즉 모서리 반경과 여백을 정합니다. Box의 높이는 담긴 내용이 정하고, 타이포그래피도 담긴 내용이 가져옵니다.

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와 render

padded={false}는 이미지나 표처럼 가장자리까지 채우는 콘텐츠를 위한 것입니다. render로 <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>
  );
}