--- title: "컴포넌트 — zenit Zig UI" description: "51개의 공개 컴포넌트와 13개의 기능 실험. 모든 영상은 E2E harness가 구동하는 실제 zenit Storybook 창의 Metal drawable…" url: https://zenit.z.express/ko/components language: ko alternate_en: https://zenit.z.express/components.md alternate_zh: https://zenit.z.express/zh/components.md alternate_es: https://zenit.z.express/es/components.md alternate_ja: https://zenit.z.express/ja/components.md alternate_fr: https://zenit.z.express/fr/components.md alternate_de: https://zenit.z.express/de/components.md project: zenit v0.1.0-alpha (Zig 0.15.2, macOS) source: https://github.com/version-next/zenit --- # 컴포넌트 51개의 공개 컴포넌트와 13개의 기능 실험. 모든 영상은 E2E harness가 구동하는 실제 zenit Storybook 창의 Metal drawable에서 녹화했으며, 소스와 Props 표는 저장소에서 그대로 추출합니다. [Button`ui.widgets.Button`기본, 보조, 위험 동작, 링크형, 아이콘 전용 버튼.](https://zenit.z.express/ko/components/button)[Checkbox`ui.widgets.Checkbox`선택 안 됨, 선택됨, 불확정 상태를 갖는 독립 불리언 선택.](https://zenit.z.express/ko/components/checkbox)[Switch`ui.widgets.Switch`즉시 적용되는 설정을 위한 토글.](https://zenit.z.express/ko/components/switch)[Radio`ui.widgets.RadioGroup`상호 배타적인 옵션에서 값 하나를 선택합니다.](https://zenit.z.express/ko/components/radio)[Slider`ui.widgets.Slider`연속 또는 단계 범위에서 값을 선택합니다.](https://zenit.z.express/ko/components/slider)[Rate`ui.widgets.Rate`별점 또는 개수가 정해진 평가.](https://zenit.z.express/ko/components/rate)[NumberStepper`ui.widgets.NumberStepper`수량과 파라미터를 정밀하게 증감합니다.](https://zenit.z.express/ko/components/stepper)[Input`ui.widgets.Input`한 줄 텍스트, 이메일, 비밀번호, 검색 입력.](https://zenit.z.express/ko/components/input)[Textarea`ui.widgets.Textarea`helper, error, 비활성 상태를 지원하는 여러 줄 편집.](https://zenit.z.express/ko/components/textarea)[Select`ui.widgets.Select`단일 선택, 다중 선택, 지우기 가능, 검색 가능한 선택기.](https://zenit.z.express/ko/components/select)[Form Composition`Input · Select · Button`같은 크기 단계의 Input, Select, Button 조합: 필터 툴바와 업무 폼.](https://zenit.z.express/ko/components/formcompose)[ComboBox`ui.widgets.ComboBox`검색과 필터링이 가능하고 값을 다시 채워 넣는 조합 입력.](https://zenit.z.express/ko/components/combobox)[TagsInput`ui.widgets.TagsInput`키보드로 여러 token을 연속 입력합니다.](https://zenit.z.express/ko/components/tags)[FileUpload`ui.widgets.FileUpload`파일 선택과 드롭 영역.](https://zenit.z.express/ko/components/upload)[DatePicker`ui.widgets.DatePicker`날짜를 입력하거나 캘린더에서 선택합니다.](https://zenit.z.express/ko/components/datepicker)[DateRangePicker`ui.widgets.DateRangePicker`시작일과 종료일을 선택합니다.](https://zenit.z.express/ko/components/daterange)[Form`ui.widgets.FormOf(T)`타입이 지정된 폼 상태, 필드 메타데이터, 검증 시점.](https://zenit.z.express/ko/components/form)[Badge`ui.widgets.Badge`낮은 강조의 상태, 개수, 시맨틱 색상 라벨.](https://zenit.z.express/ko/components/badge)[Tag`ui.widgets.Tag`닫을 수 있거나 읽기 전용인 분류 라벨.](https://zenit.z.express/ko/components/tag)[Chip`ui.widgets.Chip`간결한 선택지, 필터 조건, 아이콘 token.](https://zenit.z.express/ko/components/chip)[Card`ui.widgets.Card`제목, 본문, 상호작용 표면을 하나의 시각 단위로 묶습니다.](https://zenit.z.express/ko/components/card)[Alert`ui.widgets.Alert`페이지 안에 유지되는 피드백.](https://zenit.z.express/ko/components/alert)[Progress`ui.widgets.Progress`확정 진행률과 불확정 작업 상태.](https://zenit.z.express/ko/components/progress)[Spinner`ui.widgets.Spinner`짧은 로딩 대기를 위한 간결한 애니메이션.](https://zenit.z.express/ko/components/spinner)[Skeleton`ui.widgets.Skeleton`콘텐츠가 로드되는 동안 표시되는 자리표시자 골격.](https://zenit.z.express/ko/components/skeleton)[Timeline`ui.widgets.Timeline`시간이나 상태별로 세로 이벤트를 표시합니다.](https://zenit.z.express/ko/components/timeline)[Breadcrumb`ui.widgets.Breadcrumb`현재 위치와 상위 경로를 보여 줍니다.](https://zenit.z.express/ko/components/breadcrumb)[Steps`ui.widgets.Steps`여러 단계 작업의 완료, 현재, 대기 상태를 보여 줍니다.](https://zenit.z.express/ko/components/steps)[Tree`ui.widgets.Tree`계층 데이터, 파일 트리, 펼칠 수 있는 구조.](https://zenit.z.express/ko/components/tree)[Table`ui.widgets.Table`고정 열 정의와 사용자 정의 cell renderer를 갖춘 기본 테이블.](https://zenit.z.express/ko/components/table)[DataTable`ui.widgets.DataTable`필터, 페이지 이동, 열 동작을 갖춘 데이터 테이블.](https://zenit.z.express/ko/components/datatable)[Calendar`ui.widgets.Calendar`월 보기에서의 날짜 탐색과 선택.](https://zenit.z.express/ko/components/calendar)[Markdown`ui.widgets.Markdown`지원되는 Markdown 부분 집합을 네이티브 노드로 렌더링합니다.](https://zenit.z.express/ko/components/markdown)[Icons`ui.system_icons`프로바이더에 독립적인 시맨틱 아이콘 역할, 크기, 색조.](https://zenit.z.express/ko/components/icons)[Tabs`ui.widgets.Tabs`같은 맥락 안에서 동등한 뷰를 전환합니다.](https://zenit.z.express/ko/components/tabs)[Accordion`ui.widgets.Accordion`섹션을 접고 펼칩니다.](https://zenit.z.express/ko/components/accordion)[Menu`ui.widgets.Menu`단축키 힌트가 있는 컨텍스트 동작 목록.](https://zenit.z.express/ko/components/menu)[DropdownMenu`ui.widgets.DropdownMenu`버튼에서 열리는 명령 모음.](https://zenit.z.express/ko/components/dropdown)[Notification`ui.widgets.Notifier`작업을 방해하지 않는 알림: 아홉 가지 유형, 진행률, 액션 버튼, 스택, 여덟 개의 도킹 위치.](https://zenit.z.express/ko/components/notification)[Tooltip`ui.widgets.Tooltip`컨트롤에 짧은 보충 설명을 제공합니다.](https://zenit.z.express/ko/components/tooltip)[Popover`ui.widgets.Popover`Tooltip보다 풍부한 임시 콘텐츠를 담습니다.](https://zenit.z.express/ko/components/popover)[Modal`ui.widgets.Modal`차단형 작업, 확인, 집중된 맥락.](https://zenit.z.express/ko/components/modal)[Sheet`ui.widgets.Sheet`창 가장자리에서 밀려 들어오는 보조 패널.](https://zenit.z.express/ko/components/sheet)[GlassBox`ui.widgets.GlassBox`실제 backdrop blur를 사용하는 유리 표면.](https://zenit.z.express/ko/components/glassbox)[Divider`ui.widgets.Divider`가로, 세로, 라벨이 있는 구분선.](https://zenit.z.express/ko/components/divider)[Stack`ui.widgets.HStack / VStack`자주 쓰는 가로, 세로 배치.](https://zenit.z.express/ko/components/stack)[Layout / Box Model`ui.box`박스 모델, 백분율, 절대 위치, Flex / Grid, 클리핑의 커버리지 매트릭스.](https://zenit.z.express/ko/components/layoutbox)[VirtualList`ui.widgets.VirtualList`대량의 균일한 높이 데이터 중 보이는 구간만 마운트합니다.](https://zenit.z.express/ko/components/virtuallist)[VirtualList (Dynamic)`ui.widgets.VirtualList`행 높이가 다른 가상 목록.](https://zenit.z.express/ko/components/virtuallistdynamic)[ScrollArea`ui.widgets.mountScrollArea`직접 그리는 스크롤, 스크롤바, 프로그래밍 방식 위치 지정.](https://zenit.z.express/ko/components/scrollarea)[Grid`ui.widgets.mountGrid`2차원 행·열 데이터와 사용자 정의 cell renderer.](https://zenit.z.express/ko/components/grid)[GlassLab`ui.widgets.GlassBox`GlassBox 광학 파라미터 실험대: 굴절, 베젤 너비, 확대.](https://zenit.z.express/ko/components/glasslab)[GlassIslands`ui.widgets.GlassBox`하나의 배경 위에 겹친 여러 유리 섬.](https://zenit.z.express/ko/components/glassislands)[GlassMotion`ui.widgets.GlassBox`유리의 변형과 스크롤 중 떠 있는 툴바.](https://zenit.z.express/ko/components/glassmotion)[GlassChrome`ui.widgets.GlassBox`앱 chrome: 스크롤되는 콘텐츠 위의 유리 제목 표시줄과 툴바.](https://zenit.z.express/ko/components/glasschrome)[CanvasEvents`ui.events`캔버스 수준 이벤트: 스크롤, 확대 제스처, 드래그, 클립보드 PNG 왕복.](https://zenit.z.express/ko/components/canvasevents)[Drag`ui.interaction`드래그와 가로 resize 핸들.](https://zenit.z.express/ko/components/drag)[Gestures`ui.interaction`싱글, 더블, 트리플 클릭과 길게 누르기의 제스처 중재.](https://zenit.z.express/ko/components/multiclick)[AnimControls`ui.fx`애니메이션 제어: yoyo, 타임라인, 키프레임, 스프링.](https://zenit.z.express/ko/components/animctl)[VectorPath`ui.path`벡터 경로 기하: 선, 채우기, 히트 테스트.](https://zenit.z.express/ko/components/vectorpath)[BlendModes`ui.box`블렌드 모드와 불투명도 합성.](https://zenit.z.express/ko/components/blend)[Emoji`ui.text`컬러 이모지, ZWJ 시퀀스, 피부색 수정자.](https://zenit.z.express/ko/components/emoji)[RTL`ui.text`아랍어, 히브리어, 라틴 문자 혼합 텍스트.](https://zenit.z.express/ko/components/rtl)[WordNav`ui.widgets.Textarea`문자 체계를 넘나드는 단어 단위 커서 이동.](https://zenit.z.express/ko/components/wordnav)