Separatorstandard
내용 사이를 가르는 가로·세로 구분선(separator)입니다. shadcn base-nova 의 stock 아이템이며 Base UI `Separator` 위에 서 있습니다.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/separatorDefault
separator-example.tsx
import { Example, ExampleWrapper,} from "@/components/example"import { Separator } from "@/components/ui/separator"
export default function SeparatorExample() { return ( <ExampleWrapper> <SeparatorHorizontal /> <SeparatorVertical /> <SeparatorVerticalMenu /> <SeparatorInList /> </ExampleWrapper> )}
function SeparatorHorizontal() { return ( <Example title="Horizontal"> <div className="flex flex-col gap-4 text-sm style-lyra:text-xs/relaxed"> <div className="flex flex-col gap-1"> <div className="leading-none font-medium">shadcn/ui</div> <div className="text-muted-foreground"> The Foundation for your Design System </div> </div> <Separator /> <div> A set of beautifully designed components that you can customize, extend, and build on. </div> </div> </Example> )}
function SeparatorVertical() { return ( <Example title="Vertical"> <div className="flex h-5 items-center gap-4 text-sm style-lyra:text-xs/relaxed"> <div>Blog</div> <Separator orientation="vertical" /> <div>Docs</div> <Separator orientation="vertical" /> <div>Source</div> </div> </Example> )}
function SeparatorVerticalMenu() { return ( <Example title="Vertical Menu"> <div className="flex items-center gap-2 text-sm md:gap-4 style-lyra:text-xs/relaxed"> <div className="flex flex-col gap-1"> <span className="font-medium">Settings</span> <span className="text-xs text-muted-foreground"> Manage preferences </span> </div> <Separator orientation="vertical" /> <div className="flex flex-col gap-1"> <span className="font-medium">Account</span> <span className="text-xs text-muted-foreground"> Profile & security </span> </div> <Separator orientation="vertical" /> <div className="flex flex-col gap-1"> <span className="font-medium">Help</span> <span className="text-xs text-muted-foreground">Support & docs</span> </div> </div> </Example> )}
function SeparatorInList() { return ( <Example title="In List"> <div className="flex flex-col gap-2 text-sm style-lyra:text-xs/relaxed"> <dl className="flex items-center justify-between"> <dt>Item 1</dt> <dd className="text-muted-foreground">Value 1</dd> </dl> <Separator /> <dl className="flex items-center justify-between"> <dt>Item 2</dt> <dd className="text-muted-foreground">Value 2</dd> </dl> <Separator /> <dl className="flex items-center justify-between"> <dt>Item 3</dt> <dd className="text-muted-foreground">Value 3</dd> </dl> </div> </Example> )}