--- version: 1.0.0-beta.6 --- # Docs ## icons - [Icons](/docs/icons.mdx): @vapor-ui/icons 라이브러리에서 제공하는 아이콘입니다. 아이콘을 클릭해 import 문을 복사할 수 있습니다. ## index - [Welcome, Vapor UI](/docs.mdx): Vapor는 구름의 세 번째 디자인 시스템으로, 다양한 서브 패키지들로 구성되어 있습니다. 각 서브 패키지는 다음과 같은 역할을 수행합니다. ## components - [Avatar](/docs/components/avatar.mdx): Avatar는 사용자가 설정한 프로필 이미지 혹은 텍스트를 UI상에 나타냅니다. - [Badge](/docs/components/badge.mdx): Badge는 이미지, 컨텐츠 등의 상태 또는 분류를 시각적으로 표시합니다. - [Breadcrumb](/docs/components/breadcrumb.mdx): 사용자가 현재 페이지의 위치를 파악하고 이전 페이지로 쉽게 이동할 수 있도록 도와주는 네비게이션 컴포넌트입니다. - [Button](/docs/components/button.mdx): Button은 사용자가 주요 작업을 수행하도록 돕는 핵심 상호작용 요소입니다. - [Callout](/docs/components/callout.mdx): Callout은 중요한 정보를 시각적으로 강조하여 사용자에게 전달하는 메시지 컴포넌트입니다. - [Card](/docs/components/card.mdx): Card는 이미지와 텍스트, 일부 기능 버튼을 포함한 컨테이너로 콘텐츠를 제공합니다. - [Checkbox](/docs/components/checkbox.mdx): Checkbox는 여러 항목 중 복수 선택을 가능하게 하는 입력 컴포넌트입니다. - [Collapsible](/docs/components/collapsible.mdx): Collapsible은 콘텐츠를 접었다 펼칠 수 있는 대화형 컴포넌트입니다. 아코디언이나 확장 가능한 섹션을 구현할 때 사용합니다. - [Dialog](/docs/components/dialog.mdx): Dialog는 페이지 위에 모달 형태로 정보를 표시하거나 작업을 수행하도록 하는 컴포넌트입니다. - [Field](/docs/components/field.mdx): Field는 폼 요소들을 감싸는 컨테이너 컴포넌트로, 라벨, 설명, 에러 메시지, 성공 메시지 등을 제공합니다. - [IconButton](/docs/components/icon-button.mdx): IconButton은 특정 작업이나 기능을 나타내며, 텍스트 없이 아이콘만으로 명령을 전달하는 버튼입니다. - [InputGroup](/docs/components/input-group.mdx): InputGroup은 입력 필드(TextInput, Textarea)와 관련 요소들을 그룹화하여 문자 수 카운터와 같은 추가 기능을 제공합니다. - [Menu](/docs/components/menu.mdx): 드롭다운 Menu와 컨텍스트 Menu를 제공하는 컴포넌트입니다 - [MultiSelect](/docs/components/multi-select.mdx): MultiSelect는 사용자가 여러 옵션 중에서 다중 선택할 수 있는 드롭다운 컴포넌트입니다. 선택된 값들은 배지 형태로 표시되며, 태그 선택, 필터링, 카테고리 선택 등에 사용됩니다. - [NavigationMenu](/docs/components/navigation-menu.mdx): 여러 콘텐츠 섹션 간에 전환할 수 있도록 돕는 요소로 클릭 시 페이지가 이동합니다. - [Pagination](/docs/components/pagination.mdx): Pagination은 중요한 정보를 시각적으로 강조하여 사용자에게 전달하는 메시지 컴포넌트입니다. - [Popover](/docs/components/popover.mdx): Popover는 트리거 요소 근처에 부가 정보나 상호작용 콘텐츠를 표시하는 오버레이 컴포넌트입니다. 툴팁, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다. - [RadioCard](/docs/components/radio-card.mdx): RadioCard는 RadioGroup과 함께 사용하는 카드 형태의 라디오 버튼 컴포넌트입니다. 선택 가능한 옵션을 카드 UI로 표현하여 더 직관적인 사용자 경험을 제공합니다. - [Radio](/docs/components/radio.mdx): Radio는 여러 옵션 중 하나만 선택할 수 있는 입력 컴포넌트입니다. RadioGroup과 함께 사용하여 라디오 버튼 그룹을 구성할 수 있습니다. - [Select](/docs/components/select.mdx): Select는 사용자가 여러 옵션 중에서 하나를 선택할 수 있는 드롭다운 컴포넌트입니다. 폼 입력, 설정 선택, 필터링 등에 사용되며, 키보드 내비게이션과 접근성을 완벽하게 지원합니다. - [Sheet](/docs/components/sheet.mdx): Sheet는 화면의 가장자리에서 슬라이드되어 나타나는 오버레이 컴포넌트입니다. 사이드바, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다. - [Switch](/docs/components/switch.mdx): Switch는 사용자가 설정을 on/off로 전환할 수 있게 돕는 토글 컴포넌트입니다. - [Table](/docs/components/table.mdx): Table는 데이터를 행과 열로 구성하여 구조화된 방식으로 표시하는 컴포넌트입니다. - [Tabs](/docs/components/tabs.mdx): Tabs는 관련된 콘텐츠를 탭 형태로 구성하여 사용자가 쉽게 전환할 수 있도록 하는 컴포넌트입니다. 키보드 내비게이션, 접근성, 다양한 스타일 변형을 지원합니다. - [TextInput](/docs/components/text-input.mdx): TextInput은 사용자가 데이터를 입력할 수 있도록 텍스트, 숫자 등 다양한 형식의 입력 필드를 제공합니다. - [Text](/docs/components/text.mdx): Text 컴포넌트는 시멘틱 태그와 타이포그래피·색상 토큰을 조합하여 텍스트 스타일을 설정합니다. - [Textarea](/docs/components/textarea.mdx): Textarea는 사용자가 여러 줄의 텍스트를 입력할 수 있도록 하는 텍스트 입력 필드를 제공합니다. - [Toast](/docs/components/toast.mdx): Toast는 일시적인 알림 메시지를 사용자에게 표시하는 컴포넌트입니다. - [Tooltip](/docs/components/tooltip.mdx): 요소에 대한 추가 정보를 제공하는 툴팁 컴포넌트입니다 ## frameworks - [Next.js - App Router](/docs/frameworks/next-js-app.mdx): Vapor UI 컴포넌트를 Nextjs app router와 사용하는 방법 - [Next.js - Pages Router](/docs/frameworks/next-js-pages.mdx): Vapor UI 컴포넌트를 Nextjs Pages Router와 사용하는 방법 - [React Router](/docs/frameworks/react-router.mdx): Vapor UI 컴포넌트를 React Router와 함께 사용하는 방법 - [Vite](/docs/frameworks/vite-react.mdx): Vapor UI 컴포넌트를 Vite와 React에서 사용하는 방법 ## getting-started - [Installation](/docs/getting-started/installation.mdx): Vapor UI를 프로젝트에 설치하고 첫 컴포넌트를 사용해보세요. - [LLMs.txt](/docs/getting-started/llms-txt.mdx): Cursor 등 AI 도구에서 Vapor Design System 문서를 활용하는 방법 - [Overview](/docs/getting-started/overview.mdx): 빠른 개발과 일관된 디자인을 위한 Vapor UI 디자인 시스템을 살펴보세요. - [Design Principles](/docs/getting-started/principles.mdx): Vapor UI의 컴포넌트 아키텍처와 개발 철학을 이끄는 핵심 디자인 원칙 - [Releases](/docs/getting-started/releases.mdx): 각 Vapor UI 릴리스의 Changelogs입니다. - [Tailwind CSS v4](/docs/getting-started/tailwindcss-v4.mdx): Vapor UI와 함께 Tailwind CSS v4를 사용하세요. - [Theming](/docs/getting-started/theming.mdx): 라이트, 다크, 시스템 테마를 자동으로 지원하는 Vapor UI 테마 시스템을 설정하세요. ## layout - [Box](/docs/layout/box.mdx): 레이아웃과 스타일링을 위한 기본 컨테이너 컴포넌트입니다. 디자인 토큰을 활용한 간격, 색상, 크기 등의 속성을 제공합니다. - [Flex](/docs/layout/flex.mdx): 플렉스박스 레이아웃을 쉽게 구현할 수 있는 컨테이너 컴포넌트입니다. Box 컴포넌트를 확장하여 플렉스 관련 기능을 제공합니다. - [Grid](/docs/layout/grid.mdx): 유연하고 강력한 CSS Grid 기반의 레이아웃 컴포넌트입니다 - [HStack](/docs/layout/h-stack.mdx): 수평으로 아이템들을 배치하는 레이아웃 컴포넌트입니다 - [VStack](/docs/layout/v-stack.mdx): 수직으로 아이템들을 배치하는 레이아웃 컴포넌트입니다 ## tokens - [Color](/docs/tokens/color.mdx): 컬러 토큰은 브랜드의 정체성과 사용자 경험을 지원하는 다양한 색상을 정의합니다. - [Size](/docs/tokens/size.mdx): 요소의 크기,여백과 관련된 값을 정의하여 일관된 디자인을 유지하는 데 도움을 줍니다. - [Typography](/docs/tokens/typography.mdx): 텍스트의 스타일과 형식을 정의하여 일관된 글꼴 사용과 가독성을 보장합니다. # Blocks ## form - [Form](/blocks/form.mdx): 여러 개의 입력 단위를 하나로 묶어 사용자로부터 정보를 수집하는 폼 영역 ## nav-bar - [Navbar](/blocks/nav-bar.mdx): 사용자의 액션에 대한 피드백 혹은 서비스에 대한 메시지를 제공할 때 사용할 수 있습니다. 상황에 따라 컬러와 좌측 아이콘, 닫기 버튼을 적절히 사용합니다. ## table - [Table](/blocks/table.mdx): 데이터의 구조화된 표현을 제공하는 데 사용됩니다.