Components
협업 도구를 이루는 Steel 컴포넌트 전체 목록이에요.
Steel 컴포넌트는 Atlassian Design System 의 @atlaskit/* 패키지를 기준으로, 같은 시각 스펙과 같은 props 이름으로 다시 만든 shadcn 컴포넌트예요. 스타일은 Atlaskit 의 최신 모습(FY27 Finesse·visual refresh)을 기준으로 해요. 필요한 것만 골라 shadcn add 로 추가해요.
pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/steel/button.json설치 전에 Steel 테마를 먼저 추가해야 토큰이 적용돼요.
총 52개 컴포넌트
Actions 4
사용자가 무언가를 실행하거나 선택하게 해요.
Forms and input 11
정보를 입력하고 고르고 제출받아요.
- Calendar한 달 단위로 날짜를 보여주고 날짜를 고를 수 있게 하는 달력이에요.
steel/calendar - Checkbox여러 선택지 중 하나 이상을 고르거나 설정을 명시적으로 확인받을 때 쓰는 체크박스예요.
steel/checkbox - Datetime Picker날짜·시간을 직접 입력하거나 달력과 시간 목록에서 고를 수 있는 DatePicker, TimePicker, DateTimePicker 예요.
steel/datetime-picker - Form사용자가 정보를 입력하고 제출하도록 필드·라벨·메시지·레이아웃을 묶어 주는 폼이에요.
steel/form - Inline Edit읽기 뷰와 편집 뷰를 오가며 페이지를 떠나지 않고 값을 바로 고칠 수 있게 해요.
steel/inline-edit - Radio여러 선택지 중 정확히 하나만 고르게 하는 라디오와 라디오 그룹이에요.
steel/radio - Range최솟값과 최댓값 사이에서 대략적인 값을 슬라이더로 고르게 해요.
steel/range - Select목록에서 하나 또는 여러 항목을 고르고, 입력해서 옵션을 걸러 볼 수 있는 선택 필드예요.
steel/select - Text area여러 줄에 걸친 긴 텍스트를 입력할 수 있는 입력 영역이에요.
steel/textarea - Textfield한 줄짜리 텍스트를 입력하거나 고칠 수 있는 입력 필드예요.
steel/textfield - Toggle설정을 즉시 켜거나 끌 때 쓰는 토글 스위치예요.
steel/toggle
Messaging and feedback 5
시스템 상태와 결과를 알려줘요.
- Banner화면 맨 위에 서비스 전체에 영향을 주는 중요한 메시지를 보여주는 배너예요.
steel/banner - Empty State보여줄 데이터가 없을 때 이유와 다음 행동을 알려주는 빈 상태 화면이에요.
steel/empty-state - Flag작업 결과·알림·확인 메시지를 화면 좌하단에 잠깐 띄우는 플래그와 플래그 그룹, useFlags 훅이에요.
steel/flag - Inline Message아이콘과 짧은 문구로 상황을 알리고, 누르면 팝업으로 자세한 내용을 보여주는 메시지예요.
steel/inline-message - Section Message화면의 특정 영역에 관련된 중요한 정보나 필요한 조치를 알려주는 메시지예요.
steel/section-message
Loading 4
기다리는 동안 진행 상황을 보여줘요.
Status and labels 7
상태·개수·분류를 짧게 표시해요.
- Avatar사람이나 프로젝트·스페이스 같은 대상을 이미지로 보여주는 아바타예요.
steel/avatar - Avatar Group여러 아바타를 겹쳐 쌓거나 격자로 모아 보여주고, 넘치는 인원은 +N 메뉴로 펼쳐요.
steel/avatar-group - Badge새 댓글 수나 변경량처럼 숫자로 된 상태 정보를 작게 보여줘요.
steel/badge - Lozenge이슈의 상태처럼 빠르게 알아봐야 하는 중요한 속성을 짧은 라벨로 강조해요.
steel/lozenge - Tag이슈나 문서에 붙는 카테고리·주제 같은 메타데이터를 라벨로 보여주고, 링크나 제거 버튼을 달 수 있어요.
steel/tag - Tag Group여러 태그를 한 묶음으로 배치하고 시작·끝 정렬을 정해요.
steel/tag-group - Tile이모지·로고·아이콘 같은 에셋을 모서리가 둥근 정사각형 안에 담아 하나의 대상을 나타내요.
steel/tile
Data display 4
표·트리·코드·댓글처럼 정보를 정리해 보여줘요.
Navigation 6
사용자가 위치를 알고 다른 곳으로 이동하게 해요.
- Breadcrumbs계층 구조 안에서 현재 페이지의 위치를 보여주고 상위 페이지로 돌아가게 해주는 탐색 경로예요.
steel/breadcrumbs - Menu사용자가 이동하거나 실행할 수 있는 선택지를 목록으로 보여주는 메뉴예요.
steel/menu - Navigation System상단 내비게이션·사이드 내비게이션·메인·Aside·Panel 로 앱 전체 화면 뼈대를 만드는 내비게이션 시스템이에요.
steel/navigation-system - Pagination많은 양의 콘텐츠를 여러 페이지로 나누고 페이지 사이를 오가게 해주는 페이지네이션이에요.
steel/pagination - Side Nav Items사이드 내비게이션 안에 넣는 메뉴 항목(링크·버튼·펼침·플라이아웃)과 섹션·구분선이에요.
steel/side-nav-items - Tabs같은 맥락 안에서 서로 관련된 콘텐츠 묶음을 오가며 볼 수 있게 해주는 탭이에요.
steel/tabs
Overlays 6
현재 화면 위 레이어에 내용을 띄워요.
- Blanket모달 다이얼로그·드로어 같은 레이어 컴포넌트 뒤의 화면을 덮는 오버레이예요.
steel/blanket - Drawer화면 왼쪽에서 밀려 나와 현재 페이지를 떠나지 않고 보조 작업을 하게 해주는 패널이에요.
steel/drawer - Modal Dialog페이지 위 레이어에 떠서 사용자의 응답이 필요한 내용을 보여주는 모달 다이얼로그예요.
steel/modal-dialog - Popup트리거 옆 오버레이에 짧은 내용이나 작은 상호작용을 띄우는 팝업이에요.
steel/popup - Spotlight화면의 특정 요소를 강조하고 짧은 메시지나 여러 단계 투어로 새 기능을 소개해요.
steel/spotlight - Tooltip마우스를 올리거나 키보드로 포커스했을 때 요소를 짧게 설명하는 떠 있는 라벨이에요.
steel/tooltip
Layout and text 4
화면의 뼈대와 글자를 구성하는 기본 요소예요.
- Heading페이지 제목과 내용을 여는 소제목을 정해진 크기와 스타일로 보여줘요.
steel/heading - Page Header페이지 맨 위에서 제목과 브레드크럼, 액션, 검색·필터를 한데 묶어 페이지의 목적을 알려줘요.
steel/page-header - PrimitivesBox, Stack, Inline, Flex, Grid, Bleed, Pressable, Anchor 처럼 토큰을 바로 쓰는 레이아웃·상호작용 기본 요소예요.
steel/primitives - Text본문·설명·컴포넌트 안 글자처럼 제목이 아닌 모든 텍스트를 토큰 크기·굵기·색으로 보여줘요.
steel/text
기타 1
아직 분류되지 않은 컴포넌트예요.