### Install Vapor UI Package
Source: https://vapor-ui.goorm.io/docs/getting-started/installation.mdx
Installs the latest version of the Vapor UI core package using npm. Ensure you have Node.js and npm installed.
```bash
npm install @vapor-ui/core@latest
```
--------------------------------
### Add Vapor UI Styles
Source: https://vapor-ui.goorm.io/docs/getting-started/installation.mdx
Integrates Vapor UI's global styles into your application. This can be done either by importing a CSS file directly or using a CSS import statement, depending on your project setup.
```tsx
import '@vapor-ui/core/styles.css';
```
```css
@import '@vapor-ui/core/styles.css';
```
--------------------------------
### Assemble a Vapor UI Component
Source: https://vapor-ui.goorm.io/docs/getting-started/installation.mdx
Demonstrates how to use Vapor UI components in a React application by assembling a basic Card component with a header and body. Requires the '@vapor-ui/core' package to be installed.
```tsx
import { Card } from "@vapor-ui/core";
export default function AssembleComponent() {
return (
컴포넌트 구성하기
이것은 Vapor UI를 사용하여 컴포넌트를 구성하는 예시입니다.
);
}
```
--------------------------------
### Next.js Theming Setup with Vapor UI
Source: https://vapor-ui.goorm.io/llms-full.txt
Guide to setting up Vapor UI's theming system in a Next.js App Router project. It covers package installation, creating a theme configuration file, and applying the theme provider and script in the root layout.
```bash
npm install @vapor-ui/core@latest
```
```tsx
import { createThemeConfig } from '@vapor-ui/core';
export const themeConfig = createThemeConfig({
appearance: 'light',
radius: 'full',
scaling: 1.0,
storageKey: 'my-vapor-theme',
primaryColor: '#ffc107', // hex code로 설정
});
```
```tsx
import { ThemeProvider, ThemeScript } from '@vapor-ui/core';
import '@vapor-ui/core/dist/styles.css';
// createThemeConfig를 상단에 추가하거나, 별도 설정 파일에서 import합니다.
export default function RootLayout({ children }) {
return (
{children}
);
}
```
--------------------------------
### Vapor UI Avatar Simple Usage Examples
Source: https://vapor-ui.goorm.io/llms-full.txt
Provides examples of the Avatar.Simple component, showcasing its use with an image, a fallback for an invalid image URL, and a default fallback when no image is provided. This demonstrates simplified avatar rendering.
```typescript
import { Avatar } from '@vapor-ui/core';
export default function AvatarSimple() {
return (
);
}
```
--------------------------------
### Default Tooltip Example
Source: https://vapor-ui.goorm.io/llms-full.txt
Demonstrates the basic usage of the Tooltip component. It wraps a Button and displays a tooltip with provided content when triggered. Requires 'react' and '@vapor-ui/core'.
```tsx
'use client';
import { Button, Tooltip } from '@vapor-ui/core';
export default function DefaultTooltip() {
return (
툴팁 보기} />
유용한 정보를 제공하는 툴팁입니다.
);
}
```
--------------------------------
### NavigationMenu Example
Source: https://vapor-ui.goorm.io/llms-full.txt
Demonstrates the basic usage of the NavigationMenu component, including root, list, item, and link elements. It shows how to create default, selected, and disabled navigation links.
```tsx
import { NavigationMenu } from '@vapor-ui/core';
export default function DefaultNavigationMenu() {
return (
Default Link
Selected Link
Disabled Link
);
}
```
--------------------------------
### Menu Submenu Example
Source: https://context7_llms
Demonstrates the implementation of a nested submenu structure using the Menu component.
```APIDOC
## Menu Submenu Implementation
### Description
This example showcases how to create a multi-level submenu structure, allowing for nested menu items.
### Method
This is a UI component example, not an API endpoint.
### Endpoint
N/A
### Parameters
N/A
### Request Example
```tsx
import { Button, Menu } from '@vapor-ui/core';
export default function MenuSubmenu() {
return (
서브메뉴} />
새 파일파일 열기
최근 파일
document.txtpresentation.pptxspreadsheet.xlsx더 많은 파일...
내보내기
PDF로 내보내기이미지로 내보내기HTML로 내보내기종료
);
}
```
### Response
N/A
```
--------------------------------
### Menu Submenu Example
Source: https://vapor-ui.goorm.io/llms-full.txt
Demonstrates how to create a nested submenu structure using the Menu component.
```APIDOC
## Menu Submenu Component Example
### Description
This example showcases the usage of the `Menu` component to create a complex submenu structure, including nested menus and separators.
### Method
N/A (UI Component Example)
### Endpoint
N/A (UI Component Example)
### Parameters
N/A (UI Component Example)
### Request Example
N/A (UI Component Example)
### Response
N/A (UI Component Example)
```
--------------------------------
### NavigationMenu Stretch Example with Vapor UI
Source: https://vapor-ui.goorm.io/llms-full.txt
Demonstrates how to make NavigationMenu items stretch to fit content width using the 'stretch' prop in Vapor UI. Includes examples for both default (stretch=false) and stretched (stretch=true) states.
```tsx
import { NavigationMenu } from '@vapor-ui/core';
export default function NavStretch() {
return (
Default (stretch=false)
홈제품서비스
Stretch (stretch=true)
홈제품서비스
);
}
```
--------------------------------
### Controlled Switch Component Example
Source: https://vapor-ui.goorm.io/llms-full.txt
Demonstrates the usage of the controlled Switch component from Vapor UI's core library. It shows how to render both unchecked and initially checked switch states.
```tsx
import { Switch } from '@vapor-ui/core';
export default function SwitchControlled() {
return (
);
}
```
--------------------------------
### Default Menu Example
Source: https://vapor-ui.goorm.io/llms-full.txt
Provides a basic implementation of the Menu component from Vapor UI. It includes a trigger button that opens a dropdown menu with various item options and separators. This requires Vapor UI core components.
```tsx
import { Button, Menu } from '@vapor-ui/core';
export default function DefaultMenu() {
return (
메뉴 열기} />
새 파일새 폴더복사붙여넣기삭제
);
}
```
--------------------------------
### Vapor UI Tailwind CSS Customization Example
Source: https://context7_llms
Vapor UI와 Tailwind CSS 통합 시 CSS 레이어 우선순위를 조정하여 Tailwind의 preflight.css를 Vapor UI의 reset보다 낮은 우선순위를 갖도록 설정하는 예시입니다. 이는 Vapor UI의 자체 reset과의 충돌을 방지하고 일관성을 유지하기 위해 필요합니다.
```css
/* globals.css (예시) */
@layer tw-theme, theme, tw-base, reset, components, utilities, tw-utilities;
@import 'tailwindcss/theme.css' layer(tw-theme);
@import 'tailwindcss/utilities.css' layer(tw-utilities);
@import 'tailwindcss/preflight.css' layer(tw-base); /* 추가 */
@import '@vapor-ui/core/styles.css';
@import '@vapor-ui/core/tailwind.css';
```
--------------------------------
### NavigationMenu Link Selected State Example
Source: https://vapor-ui.goorm.io/llms-full.txt
Demonstrates how to set the selected state for NavigationMenu.Link components to visually indicate the active link. This example includes different styling variations for selected links.
```tsx
import { NavigationMenu } from '@vapor-ui/core';
export default function NavSelected() {
return (
선택된 상태 표시
홈제품 (선택됨)서비스회사소개
다양한 모양에서의 선택 상태
일반선택됨 (Fill)일반일반선택됨 (Ghost)일반
);
}
```
--------------------------------
### VStack Reverse Order Example
Source: https://vapor-ui.goorm.io/llms-full.txt
Shows how to reverse the order of items within a VStack component by using the 'reverse' prop. This allows for displaying content in the opposite vertical sequence.
```tsx
import { VStack } from '@vapor-ui/core';
export default function VStackReverse() {
return (
Normal Stack
First
Second
Third
Reverse Stack
First
Second
Third
);
}
```
--------------------------------
### Default TextInput Component
Source: https://vapor-ui.goorm.io/llms-full.txt
A basic example of the TextInput component from Vapor UI's core library, showcasing its default rendering.
```tsx
import { TextInput } from '@vapor-ui/core';
export default function DefaultTextInput() {
return
}
```
--------------------------------
### Tooltip Positioning
Source: https://vapor-ui.goorm.io/llms-full.txt
Illustrates how to control the display position of the Tooltip component. It shows examples for 'top', 'right', 'bottom', and 'left' positioning. Dependencies include 'react' and '@vapor-ui/core'.
```tsx
import { Button, Tooltip } from '@vapor-ui/core';
export default function TooltipPositioning() {
return (
);
}
```
--------------------------------
### NavigationMenu Disabled Link Example with Vapor UI
Source: https://vapor-ui.goorm.io/llms-full.txt
Illustrates how to disable NavigationMenu.Link components within a Vapor UI NavigationMenu. Shows examples of disabled links alongside active and selected links.
```tsx
import { NavigationMenu } from '@vapor-ui/core';
export default function NavDisabled() {
return (
기본 상태와 비활성화 상태
활성 링크비활성화 링크다른 활성 링크
선택된 상태와 비활성화 상태
홈선택된 링크비활성화 링크연락처
);
}
```
--------------------------------
### Vapor UI NavigationMenu Simple Usage with LinkItem
Source: https://vapor-ui.goorm.io/llms-full.txt
Provides a basic example of using the NavigationMenu.LinkItem component for simple navigation links. It demonstrates setting the size, aria-label, and handling selected and disabled states.
```tsx
import { NavigationMenu } from '@vapor-ui/core';
export default function NavSimple() {
return (
홈
제품
회사소개
연락처
);
}
```
--------------------------------
### React Submenu Implementation with Vapor UI
Source: https://vapor-ui.goorm.io/llms-full.txt
This snippet showcases how to build nested menus and submenus using Vapor UI's Menu components. It demonstrates the structure for creating items, separators, and managing submenu states. The example requires `@vapor-ui/core` for its components.
```tsx
import { Button, Menu } from '@vapor-ui/core';
export default function MenuSubmenu() {
return (
서브메뉴} />
새 파일파일 열기
최근 파일
document.txtpresentation.pptxspreadsheet.xlsx더 많은 파일...
내보내기
PDF로 내보내기이미지로 내보내기HTML로 내보내기종료
);
}
```
--------------------------------
### Navigation Menu Composition with Icons (TSX)
Source: https://context7_llms
Demonstrates the composition of Vapor UI's Navigation Menu, including icons for 'Favorites', 'User Management', and 'System Settings'. This example highlights integrating icons within navigation links.
```tsx
import { NavigationMenu } from '@vapor-ui/core';
import { StarIcon, UserIcon, SettingIcon } from '@vapor-ui/icons';
export default function NavWithIcons() {
return (
즐겨찾기
사용자 관리
시스템 설정
);
}
```
--------------------------------
### Vapor UI Tooltip Alignment (React/TSX)
Source: https://context7_llms
Demonstrates how to align Tooltips using the 'side' and 'align' props. Supports bottom and right alignments with start, center, and end options.
```tsx
import { Button, Tooltip } from '@vapor-ui/core';
export default function TooltipAlignment() {
return (
하단 정렬
시작} />
시작 위치에 정렬된 툴팁중앙} />
중앙에 정렬된 툴팁끝} />
끝 위치에 정렬된 툴팁
우측 정렬
시작} />
상단 시작 위치중앙} />
중앙 위치끝} />
하단 끝 위치
);
};
```
--------------------------------
### Configuring CSS Layer Order
Source: https://vapor-ui.goorm.io/llms-full.txt
Example of configuring the CSS layer order in `globals.css` to manage style priorities between Vapor UI and Tailwind CSS. This ensures Tailwind utilities have the highest priority for easy overriding.
```css
/* globals.css (example) */
@layer tw-theme, theme, tw-base, reset, components, utilities, tw-utilities;
@import 'tailwindcss/theme.css' layer(tw-theme);
@import 'tailwindcss/utilities.css' layer(tw-utilities);
@import 'tailwindcss/preflight.css' layer(tw-base); /* Added */
@import '@vapor-ui/core/styles.css';
@import '@vapor-ui/core/tailwind.css';
```
--------------------------------
### Vapor UI Tooltip Delay Customization (React/TSX)
Source: https://context7_llms
Illustrates how to control the display delay of Tooltips using the 'delay' prop. Examples include immediate display, 0.5s, 1s, and 2s delays.
```tsx
import { Button, Tooltip } from '@vapor-ui/core';
export default function TooltipDelay() {
return (
즉시 표시} />
지연 없이 바로 표시되는 툴팁0.5초 지연} />
0.5초 후에 표시되는 툴팁1초 지연} />
1초 후에 표시되는 툴팁2초 지연} />
2초 후에 표시되는 툴팁
);
};
```
--------------------------------
### Switch Component Various States
Source: https://context7_llms
Provides a comprehensive example showcasing different states of the Switch component, including default, checked, disabled, and disabled-checked states. This helps visualize the component's behavior under various conditions.
```tsx
import { Switch } from '@vapor-ui/core';
export default function SwitchStates() {
return (
);
}
```
--------------------------------
### HStack Justify Content Examples
Source: https://vapor-ui.goorm.io/llms-full.txt
Demonstrates how to adjust the horizontal distribution of items within an HStack component using different justifyContent properties like 'flex-start', 'center', and 'space-between'. This component is based on Flex and optimized for horizontal layouts.
```tsx
import { HStack } from '@vapor-ui/core';
export default function HStackJustify() {
return (
Justify Start
A
B
C
Justify Center
A
B
C
Space Between
A
B
C
);
}
```
--------------------------------
### Switch Component Checked State
Source: https://context7_llms
Shows how to set the initial checked state of the Switch component using the 'defaultChecked' prop. This example displays a default switch and one that is checked by default.
```tsx
import { Switch } from '@vapor-ui/core';
export default function SwitchChecked() {
return (
);
}
```
--------------------------------
### Switch Component Sizes
Source: https://context7_llms
Illustrates how to change the size of the Switch component using the 'size' prop. Available sizes are 'sm', 'md', and 'lg'. This example displays switches of all three sizes horizontally.
```tsx
import { Switch } from '@vapor-ui/core';
export default function SwitchSize() {
return (
);
}
```
--------------------------------
### Indeterminate Checkbox Example (React)
Source: https://context7_llms
Demonstrates how to implement an indeterminate state for a checkbox using React and Vapor UI. This state is used when a parent checkbox controls a group of child checkboxes, and only some of the children are selected.
```tsx
import { useState } from 'react';
import { Checkbox, Text } from '@vapor-ui/core';
export default function CheckboxIndeterminate() {
const [checkedItems, setCheckedItems] = useState({
apple: false,
banana: false,
orange: false,
});
const allChecked = Object.values(checkedItems).every(Boolean);
const isIndeterminate = Object.values(checkedItems).some(Boolean) && !allChecked;
const handleSelectAll = (checked: boolean) => {
setCheckedItems({
apple: checked,
banana: checked,
orange: checked,
});
};
const handleItemChange = (item: keyof typeof checkedItems, checked: boolean) => {
setCheckedItems((prev) => ({
...prev,
[item]: checked,
}));
};
return (
} className="font-medium flex items-center gap-2.5">
Select All Fruits
);
};
```
--------------------------------
### Switch Component Disabled State
Source: https://context7_llms
Demonstrates the disabled state of the Switch component using the 'disabled' prop. This is used when interaction is temporarily restricted. The example shows both a disabled switch and a disabled switch that is checked by default.
```tsx
import { Switch } from '@vapor-ui/core';
export default function SwitchDisabled() {
return (
);
}
```
--------------------------------
### Vapor UI Tooltip Offset Adjustment (TSX)
Source: https://vapor-ui.goorm.io/llms-full.txt
This code snippet demonstrates how to adjust the 'sideOffset' for distance and 'alignOffset' for alignment of Vapor UI Tooltips. It requires the Button and Tooltip components from '@vapor-ui/core'. The examples show tooltips with different offset values applied.
```tsx
import { Button, Tooltip } from '@vapor-ui/core';
export default function TooltipOffset() {
return (
);
};
```
--------------------------------
### Vapor UI Dialog 크기 조절
Source: https://vapor-ui.goorm.io/llms-full.txt
Vapor UI의 Dialog 컴포넌트에서 md, lg, xl 크기를 적용하는 방법을 보여주는 예제입니다. 각 크기에 맞는 Dialog를 생성하고 트리거 버튼과 함께 표시합니다. Dialog의 내용 구성은 기본 예제와 유사합니다.
```tsx
import { Button, Dialog } from '@vapor-ui/core';
export default function DialogSize() {
return (
Medium SizeMedium 크기의 다이얼로그입니다.Large SizeLarge 크기의 다이얼로그입니다.Extra Large SizeExtra Large 크기의 다이얼로그입니다.
);
}
```
--------------------------------
### Vapor UI Navigation Menu Basic Composition
Source: https://vapor-ui.goorm.io/llms-full.txt
Demonstrates the basic composition of the Vapor UI Navigation Menu using NavigationMenu.Root, NavigationMenu.List, NavigationMenu.Item, and NavigationMenu.Link. This pattern allows for flexible structuring of navigation elements.
```tsx
import { NavigationMenu } from '@vapor-ui/core';
export default function NavComposition() {
return (
기본 컴포지션 패턴
홈제품회사소개연락처
LinkItem 패턴 (편의 컴포넌트)
홈제품회사소개연락처
);
}
```
--------------------------------
### Vapor UI Dialog 기본 사용법
Source: https://vapor-ui.goorm.io/llms-full.txt
Vapor UI의 Dialog 컴포넌트를 사용하여 기본적인 모달 대화 상자를 생성하는 예제입니다. Button 컴포넌트를 트리거로 사용하며, Dialog의 헤더, 본문, 푸터 내용을 포함합니다. 별도의 의존성은 없습니다.
```tsx
import { Button, Dialog } from '@vapor-ui/core';
export default function DefaultDialog() {
return (
알림여기에 다이얼로그 본문 내용이 들어갑니다.
);
}
```
--------------------------------
### Vite ThemeProvider Configuration
Source: https://vapor-ui.goorm.io/llms-full.txt
Configures and applies the Vapor UI ThemeProvider in a Vite application's main entry point (src/main.tsx). It imports necessary components from '@vapor-ui/core' and sets up theme configurations including primary color and storage key.
```tsx
import { ThemeProvider, createThemeConfig } from '@vapor-ui/core';
import '@vapor-ui/core/styles.css';
const themeConfig = createThemeConfig({
appearance: 'light',
radius: 'full',
scaling: 1.0,
primaryColor: '#ffc107', // hex code로 설정
storageKey: 'my-vapor-theme',
});
ReactDOM.createRoot(document.getElementById('root')!).render(
,
);
```