💡

Separator

Created

2026/01/17 06:20

Context

Sidebar에서 shadcn/ui의 Separator 컴포넌트를 활용한다. 따라서 이를 분석하고 이해할 필요가 있어 이 글을 작성.

Agenda

•

Separator 컴포넌트를 분석하고 그 내용을 이해하는 것을 목표로 함

import * as SeparatorPrimitive from '@radix-ui/react-separator';
import { cn } from '@ui/lib/utils';
import type * as React from 'react';

function Separator({
	className,
	orientation = 'horizontal',
	decorative = true,
	...props
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
	return (
		<SeparatorPrimitive.Root
			data-slot='separator'
			decorative={decorative}
			orientation={orientation}
			className={cn(
				'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
				className,
			)}
			{...props}
		/>
	);
}

export { Separator };
TypeScript
복사

shadcn/ui의 Separator는 radix-ui의 Primitive Separator를 사용해 구현한다. orientation을 horizontal 혹은 vertical로 받아 세로, 가로 구분선으로 스타일링 한다. decorative 파라미터는 true일 때 단순히 시각적 요소로만 작용하고 false이면 의미론적으로 작용하지 않는다.

Separator

Context

Agenda

Contents