구성 요소

Layout

응용 프로그램의 레이아웃을 구성하고 UI에 대한 일관된 기반을 설정하기 위한 핵심 구조 구성 요소입니다.Core structural components for organizing your application's layout and establishing a consistent foundation for your UI.

App

앱에 전역 구성, 토스트 및 툴팁을 제공하는 래퍼입니다.A wrapper to provide global configuration, toast and tooltips to your app.

Container

내용의 폭을 중심에 놓고 제한할 레이아웃 요소입니다.

Error

NuxtError 지원을 사용하는 미리 빌드된 오류 구성 요소입니다.A pre-built error component with NuxtError support.

Footer

귀하의 사이트 링크 및 법적 고지에 대한 응답 바닥글.

Header

사이트 탐색을 위한 응답형 헤더입니다.

Main

사용 가능한 뷰포트 높이를 채우는 주 요소입니다.

Sidebar

여러 가지 시각적 변형이 있는 축소 가능한 사이드바.

Splitter

드래그 가능한 핸들로 구분된 크기 조절 가능한 패널 세트입니다.

Theme

하위 구성요소의 주제를 지정하는 헤드 없는 구성요소입니다.

Element

직관적이고 일관된 사용자 환경을 만들기 위한 버튼, 배지, 아바타, 아이콘 및 기타 기본 인터페이스 요소를 포함하는 필수 UI 구성 요소입니다.

Alert

사용자의 주의를 끌기 위한 콜아웃입니다.

Avatar

fallback 및 Nuxt Image를 지원하는 img 요소입니다.

AvatarGroup 이미지

그룹에 여러 아바타를 쌓습니다.

Badge

상태 또는 범주를 나타내는 짧은 텍스트입니다.

Banner

웹 사이트 상단에 배너를 표시하여 사용자에게 중요한 정보를 알려줍니다.

Button

링크 역할을 하거나 동작을 트리거할 수 있는 단추 요소입니다.

Calendar

단일 날짜, 여러 날짜 또는 날짜 범위를 선택하기 위한 달력 구성 요소.

Card

카드의 내용을 머리글, 본문 및 바닥글과 함께 표시합니다.

Chip

숫자 값 또는 상태를 나타내는 표시기.

Collapsible

내용의 가시성을 전환하기 위한 축소 가능한 요소.

필드 그룹(FieldGroup)

여러 단추와 같은 요소를 함께 그룹화합니다.

Icon

Iconify 또는 다른 구성 요소의 아이콘을 표시하는 구성 요소입니다.

Kbd

키보드 키를 표시할 kbd 요소입니다.

Progress

작업의 진행률을 보여주는 표시기입니다.

ProgressGroup 진행 그룹

진행률 막대는 합계가 되는 여러 세그먼트로 분할됩니다.

Separator

내용을 가로 또는 세로로 구분합니다.

Skeleton

내용을 로드하는 동안 표시할 자리 표시자입니다.

Form

텍스트 입력, 선택, 확인란, 라디오 그룹, 스위치, 슬라이더 및 전체 양식 유효성 검사를 포함하여 대화형 사용자 입력 환경을 구축하기 위한 포괄적인 양식 구성 요소

Checkbox

선택된 상태와 선택되지 않은 상태 사이를 전환하는 입력 요소입니다.

CheckboxGroup 체크박스 그룹

리스트에서 여러 옵션을 선택하는 확인란 세트입니다.

ColorPicker (ColorPicker)

색상을 선택하는 구성요소입니다.

파일 (File) 업로드 (Upload)

파일을 업로드할 입력 요소입니다.

Form

유효성 검사 및 제출 처리가 내장된 양식 구성 요소입니다.

FormField 형식필드

유효성 검사 및 오류 처리를 제공하는 양식 요소에 대한 래퍼입니다.

Input

텍스트를 입력할 입력 요소입니다.

InputDate 입력

날짜 선택을 위한 입력 구성 요소입니다.

InputMenu

실시간 제안이 포함된 자동 완성 입력입니다.

InputNumber 입력

사용자 정의할 수 있는 범위의 숫자 값에 대한 입력입니다.

InputRating (입력 등급)

사용자로부터 등급을 표시하고 수집하는 구성요소입니다.

InputTags 입력

대화형 태그를 표시하는 입력 요소입니다.

InputTime

시간을 선택하기 위한 입력.

Listbox

검색, 가상화 및 리치 항목 렌더링이 포함된 선택 가능한 항목 목록입니다.

PinInput (핀입력)

핀을 입력할 입력 요소입니다.

라디오그룹 RadioGroup

목록에서 단일 옵션을 선택하는 라디오 단추 세트입니다.

Select

옵션 리스트에서 선택할 요소입니다.

SelectMenu 선택

고급 검색 가능한 선택 요소입니다.

Slider

범위 내에서 숫자 값을 선택하는 입력입니다.

Switch

두 상태 사이를 전환하는 컨트롤입니다.

Textarea

여러 줄 텍스트를 입력할 textarea 요소입니다.

Data 데이터

테이블, 아코디언, 캐로셸, 타임라인, 트리 및 사용자 프로파일을 포함하여 데이터를 표시하고 구성하는 구성요소입니다.

Accordion

접을 수 있는 패널의 스택 세트입니다.

Carousel

Embla를 사용하여 제작된 모션 및 스와이프가 있는 회전목마.

Empty

빈 상태를 표시하는 구성요소입니다.

Marquee

무한 스크롤 내용을 만드는 구성 요소입니다.

ScrollArea (스크롤 영역)

가상화를 지원하는 유연한 스크롤 컨테이너.

Table

행 및 열에 데이터를 표시하는 반응형 테이블 요소입니다.

Timeline

날짜, 제목, 아이콘 또는 아바타가 포함된 이벤트 시퀀스를 표시하는 구성 요소입니다.

Tree

계층 데이터 구조를 표시하고 상호 작용하는 트리 뷰 구성 요소입니다.

User

이름, 설명 및 아바타와 함께 사용자 정보를 표시합니다.

navigation 탐색

메뉴, 빵 부스러기, 페이지 매김, 탭, 스텝퍼, 링크 및 명령 팔레트를 포함하여 사용자 탐색 및 경로 찾기를 위한 구성요소

Breadcrumb

웹 사이트를 탐색하는 링크의 계층입니다.

CommandPalette 명령팔레트

효율적인 퍼지 매칭을 위해 Fuse.js로 구동되는 전체 텍스트 검색이 포함된 명령 팔레트입니다.

FooterColumns (FooterColumns)

바닥글에 표시할 열로 표시되는 링크 목록.

Link

NuxtLink 주변에 추가 소품이 있는 래퍼입니다.

NavigationMenu 탐색 메뉴

가로 또는 세로로 표시할 수 있는 링크 리스트입니다.

Pagination

페이지를 탐색할 단추 또는 링크 목록입니다.

Stepper

다중 단계 프로세스를 통해 진행 상황을 나타내는 데 사용되는 단계 세트입니다.

Tabs

한 번에 하나씩 표시되는 탭 패널 세트입니다.

오버레이

기본 컨텐트 위에 표시되는 부동 UI 요소로 모달, 팝업, 도구 설명, 드로어, 슬라이드오버 및 컨텍스트 메뉴가 있습니다.

ContextMenu (컨텍스트메뉴)

요소를 마우스 오른쪽 버튼으로 클릭할 때 동작을 표시하는 메뉴입니다.

Drawer

화면 안팎으로 부드럽게 미끄러지는 서랍

DropdownMenu (드롭 다운 메뉴)

요소를 클릭할 때 동작을 표시하는 메뉴입니다.

Modal

메시지를 표시하거나 사용자 입력을 요청하는 데 사용할 수 있는 대화상자 창입니다.

Popover

트리거 요소 주위에 부동하는 비모달 대화상자입니다.

Slideover

화면의 어느 쪽에서나 슬라이드 인하는 대화 상자입니다.

Toast

사용자에게 정보 또는 피드백을 제공하는 간결한 메시지입니다.

Tooltip

요소 위에 마우스를 놓을 때 정보를 나타내는 팝업입니다.

Page 파일

소개 페이지, 블로그, 가격 페이지 및 기타 마케팅 자료를 작성하기 위한 사전 구축된 마케팅 및 컨텐츠 섹션입니다.

AuthForm 작성

로그인, 등록 또는 비밀번호 재설정 양식을 만들기 위한 사용자 정의 양식입니다.

블로그포스트 (BlogPost)

블로그 페이지에 표시할 사용자 정의 가능한 문서입니다.

블로그포스트 (BlogPosts)

반응형 그리드 레이아웃에 블로그 게시물 목록을 표시합니다.

ChangelogVersion 변경

변경 로그에 표시할 사용자 지정 가능한 문서입니다.

ChangelogVersions 변경하기

일정에 변경 로그 버전 목록을 표시합니다.

Page

왼쪽 및 오른쪽 열이 있는 페이지에 대한 그리드 레이아웃입니다.

PageAnchors (페이지 앵커)

페이지에 표시할 앵커 목록입니다.

페이지사이드 PageAside

페이지 네비게이션을 표시하기 위해 옆으로 고정됩니다.

PageBody 페이지 바디

페이지의 주요 내용입니다.

페이지카드 (PageCard)

제목, 설명 및 선택적 링크를 표시하는 사전 스타일 카드 구성요소입니다.

PageColumns 페이지열

컨텐츠를 나란히 구성하기 위한 반응형 다중 열 레이아웃 시스템.

PageCTA

페이지에 표시할 작업 호출 섹션입니다.

PageFeature 페이지 기능

응용 프로그램의 주요 기능을 보여주는 구성 요소입니다.

PageGrid (페이지그리드)

유연한 레이아웃으로 콘텐츠를 표시하기 위한 반응형 그리드 시스템

페이지헤더 PageHeader

페이지에 대한 응답 헤더입니다.A responsible header for your pages.

PageHero 페이지 영웅

당신의 페이지에 대한 반응 영웅.

페이지링크 (PageLinks)

페이지에 표시할 링크 목록입니다.

PageList 페이지목록

컨텐츠를 스택 형식으로 표시하는 수직 리스트 레이아웃입니다.

PageLogos 페이지로고

페이지에 표시할 로고 또는 이미지 목록입니다.

PageSection 페이지섹션

당신의 페이지에 대한 응답 섹션입니다.

PricingPlan 가격계획

가격책정 페이지에 표시할 사용자 정의된 가격책정 계획.

PricingPlans 가격 계획

응답 그리드 레이아웃에 가격책정 계획 목록을 표시합니다.

PricingTable (가격 테이블)

기능 비교와 함께 계층형 가격책정 계획을 표시하는 응답형 가격책정 테이블 구성요소.

Dashboard 사용자

크기 조정 가능한 패널, 축소 가능한 사이드바, 도구 모음 및 검색 기능을 사용하여 동적 대시보드를 구축하기 위한 특수 구성 요소입니다.

Dashboard그룹

사이드바 상태 관리 및 지속성을 갖춘 대시보드 구성 요소에 컨텍스트를 제공하는 고정 레이아웃 구성 요소입니다.

대시보드 Navbar

대시보드에 표시할 응답형 navbar입니다.A responsible navbar to display in a dashboard.

dashboardPanel 대시보드

대시보드에 표시할 크기 조절 가능한 패널입니다.

DashboardResizeHandle 대시보드ResizeHandle

사이드바 또는 패널의 크기를 조정하는 핸들입니다.

dashboardSearch

대시보드에 추가할 준비가 된 CommandPalette.

DashboardSearchButton

DashboardSearch 모달을 여는 사전 스타일 단추입니다.A pre-styled Button to open the DashboardSearch modal.

대시보드 사이드바

대시보드에 표시할 크기 조절 가능하고 축소 가능한 사이드바입니다.

대시보드사이드바 축소

바탕 화면에서 사이드바를 축소하는 단추입니다.

대시보드 사이드바토글

모바일에서 사이드바를 전환하는 버튼입니다.

대시보드 도구막대

대시보드의 탐색 표시줄 아래에 표시할 도구 모음입니다.

AI 대화

대화형 인터페이스 및 챗봇을 구축하기 위한 구성 요소는 Vercel AI SDK로 구동됩니다.

ChatMessage 대화

아이콘, 아바타 및 동작이 포함된 대화 메시지를 표시합니다.

ChatMessages (대화 메시지)

Vercel AI SDK와 원활하게 작동하도록 설계된 채팅 메시지 목록을 표시합니다.

ChatPalette 대화

오버레이 내부에 챗봇 인터페이스를 만드는 채팅 팔레트입니다.

ChatPrompt 대화

AI 채팅 인터페이스에서 프롬프트를 제출하기 위한 향상된 Textarea.

ChatPromptSubmit (ChatPromptSubmit)

자동 상태 처리를 사용하여 채팅 프롬프트를 제출하는 단추입니다.

ChatReasoning 대화

축소 가능한 AI 추론 또는 사고 과정을 표시합니다.

ChatShimmer 이미지

텍스트 쉬머 애니메이션 효과를 표시합니다.

ChatTool (ChatTool)

축소 가능한 AI 도구 호출 상태를 표시합니다.

Editor: badge{label="4.3+" class="align-text-top"}

Markdown, HTML 및 JSON 콘텐츠 유형을 지원하는 리치 텍스트 편집기를 구축하기 위한 구성 요소, powered by TipTap.

Editor

Markdown, HTML 및 JSON 콘텐츠 유형을 지원하는 TipTap 기반의 리치 텍스트 편집기 구성 요소입니다.A rich text editor component based on TipTap with support for markdown, HTML, and JSON content types.

EditorDragHandle

편집기에서 블록의 순서를 변경하고 선택하기 위한 끌 수 있는 핸들입니다.

EditorEmojiMenu

편집기에서 : 문자를 입력할 때 이모티콘 제안을 표시하는 이모티콘 선택기 메뉴입니다.

편집 (Edit) 멘션 (Mental) 메뉴

편집기에 트리거 문자를 입력할 때 사용자 제안을 표시하는 언급 메뉴입니다.

편집 제안 메뉴

편집기에 / 문자를 입력할 때 서식 지정 및 동작 제안을 표시하는 명령 메뉴입니다.

편집(Edit)도구 모음(Toolbar)

편집기 작업을 위한 사용자 정의 가능한 도구 모음으로, 고정, 버블 또는 부동 메뉴로 표시할 수 있습니다.

Content 파일

목차, 검색, 탐색 트리 및 주변 페이지 링크를 포함하여 문서 사이트용 Content와 통합되는 구성 요소입니다.

ContentNavigation 내용 탐색

페이지 링크를 구성하는 데 사용되는 아코디언 스타일의 탐색 구성 요소입니다.

ContentSearch 검색

설명서에 추가할 수 있는 CommandPalette 입니다.

ContentSearchButton의 경우

ContentSearch 모달을 여는 미리 스타일된 Button입니다.A pre-styled Button to open the ContentSearch modal.

ContentSurround (컨 텐트서라운드)

페이지 사이를 탐색할 수 있는 prev 및 다음 링크 쌍입니다.

컨 텐트 Toc

자동으로 활성화된 앵커 링크 강조 표시가 있는 고정된 목차입니다.

Color 모델

Color Mode와 통합된 구성 요소로 밝은 색, 어두운 색 및 시스템 기본 설정 간에 테마를 전환할 수 있습니다.

Color Mode와 통합된 구성 요소로 밝은 색, 어두운 색 및 시스템 기본 설정 간에 테마를 전환할 수 있습니다.

ColorModeAvatar의 지도

빛과 어둠 모드를 위한 다른 소스를 가진 아바타.

ColorModeButton 이미지

밝은 모드와 어두운 모드 사이를 전환하는 버튼입니다.

ColorModeImage 이미지

밝은 모드와 어두운 모드에 대해 소스가 다른 이미지 요소.

ColorMode 선택

시스템, 어둡고 밝은 모드 간에 전환하려면 선택합니다.

ColorModeSwitch (ColorModeSwitch)

밝은 모드와 어두운 모드 사이를 전환합니다.Switch to toggle between light and dark mode.

i 18 n

국제화 및 로케일 관리를 위해 18n와 통합된 구성 요소입니다.

국제화 및 로케일 관리를 위해 18n와 통합되는 구성 요소입니다.

지역 선택

로케일 간에 전환하려면 선택합니다.Select to switch between locales.