Separator

콘텐츠를 시각적 또는 의미적으로 구분합니다.

디지털정부 가이드라인

공공서비스를 위한 개방형 디자인 시스템입니다.

구분선은 인접한 콘텐츠를 시각적으로 분리해 사용자가 정보를 쉽게 인식할 수 있도록 돕습니다.

examples/krds/separator-demo.tsx

import { Separator } from "@/components/ui/separator"

export default function SeparatorDemo() {

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/separator.json

import { Separator } from "@/components/ui/separator"

<Separator />

Use orientation="vertical" for a vertical separator.

공지사항

이용안내

자주 묻는 질문

examples/krds/separator-vertical.tsx

import { Separator } from "@/components/ui/separator"

export function SeparatorVertical() {

Vertical separators between menu items with descriptions.

환경설정이용 환경 관리

내 정보개인정보 및 보안 설정

도움말서비스 이용 안내

examples/krds/separator-menu.tsx

import { Separator } from "@/components/ui/separator"

export function SeparatorMenu() {

Horizontal separators between list items.

examples/krds/separator-list.tsx

import { Separator } from "@/components/ui/separator"

export function SeparatorList() {

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

Radix Primitives

مكتبة مكونات واجهة مستخدم مفتوحة المصدر

مجموعة من المكونات المصممة بشكل جميل التي يمكنك تخصيصها وتوسيعها والبناء عليها.

examples/krds/separator-rtl.tsx

"use client"

import * as React from "react"

Radix UI Separator 문서를 참고하세요.