# Docs

## icons

- [Icons](/docs/icons.mdx): @vapor-ui/icons 라이브러리에서 제공하는 아이콘입니다. 
아이콘을 클릭해 import 문을 복사할 수 있습니다.


## undefined

- [Welcome, Vapor](/docs.mdx): Vapor는 구름의 세 번째 디자인 시스템으로, 다양한 서브 패키지들로 구성되어 있습니다. 각 서브 패키지는 다음과 같은 역할을 수행합니다.

## components

- [Avatar](/docs/components/avatar.mdx): Avatar는 사용자가 설정한 프로필 이미지 혹은 텍스트를 UI상에 나타냅니다.
- [Badge](/docs/components/badge.mdx): Badge는 이미지, 컨텐츠 등의 상태 또는 분류를 시각적으로 표시합니다.
- [Button](/docs/components/button.mdx): Button은 사용자가 주요 작업을 수행하도록 돕는 핵심 상호작용 요소입니다.
- [Card](/docs/components/card.mdx): Card는 이미지와 텍스트, 일부 기능 버튼을 포함한 컨테이너로 콘텐츠를 제공합니다.
- [IconButton](/docs/components/icon-button.mdx): IconButton은 특정 작업이나 기능을 나타내며, 텍스트 없이 아이콘만으로 명령을 전달하는 버튼입니다.
- [Nav](/docs/components/nav.mdx): Nav는 여러 콘텐츠 섹션 간 전환을 돕는 네비게이션 메뉴 컴포넌트입니다.
- [TextInput](/docs/components/text-input.mdx): TextInput은 사용자가 데이터를 입력할 수 있도록 텍스트, 숫자 등 다양한 형식의 입력 필드를 제공합니다.
- [Text](/docs/components/text.mdx): Text 컴포넌트는 시멘틱 태그와 타이포그래피·색상 토큰을 조합하여 텍스트 스타일을 설정합니다.

## 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와 개발 생산성을 위해 설계되었습니다.
- [Theming](/docs/getting-started/theming.mdx): Vapor UI 테마 시스템을 설정하는 방법

## theming

- [Next.js(App)에서 사용하기](/docs/theming/next-app.mdx): Next.js App Router 환경에서 @vapor-ui/core를 설정하고, 서버 사이드 렌더링(SSR)의 이점을 활용하여 깜빡임 없는 동적 테마를 구현하는 방법을 안내합니다.
- [Tailwind CSS와 함께 사용하기](/docs/theming/tailwindcss.mdx): Tailwind CSS 환경에서 @vapor-ui/core 테마 시스템을 통합하는 방법을 알아봅니다.
- [Vite에서 사용하기](/docs/theming/vite.mdx): Vite 환경에서 @vapor-ui/core 테마 시스템을 설정하고, 화면 깜빡임(FOUC)을 방지하기 위해 스크립트를 수동으로 설정하는 방법을 안내합니다.

## tokens

- [Color](/docs/tokens/color.mdx): 컬러 토큰은 브랜드의 정체성과 사용자 경험을 지원하는 다양한 색상을 정의합니다.
- [Size](/docs/tokens/size.mdx): 요소의 크기,여백과 관련된 값을 정의하여 일관된 디자인을 유지하는 데 도움을 줍니다.
- [Typography](/docs/tokens/typography.mdx): 텍스트의 스타일과 형식을 정의하여 일관된 글꼴 사용과 가독성을 보장합니다.