패키지 설치
core, neutral theme, CLI를 함께 설치해 컴포넌트, 테마, 문서 탐색을 한 번에 준비합니다.
npm install @astryxdesign/core @astryxdesign/theme-neutral @astryxdesign/cli시작하기 > 설치Astryx 전체 컴포넌트 카탈로그
93개를 하나씩 여는 Next.js 갤러리.
설치된 `@astryxdesign/core` 문서 메타데이터에서 컴포넌트와 훅 목록을 생성했습니다. 카드를 누르면 Next.js 라우트 기반 상세 페이지에서 import, props, 사용 규칙, 공식 문서 링크를 확인합니다.
전역 CSS 연결
reset, core CSS, theme CSS를 전역으로 import해 토큰과 컴포넌트 스타일을 활성화합니다.
@import '@astryxdesign/core/reset.css';
@import '@astryxdesign/core/astryx.css';
@import '@astryxdesign/theme-neutral/theme.css';시작하기 > 테마 CSS 추가첫 컴포넌트 사용
컴포넌트는 번들 크기와 의도를 위해 카테고리별 subpath에서 가져옵니다.
import {Button} from '@astryxdesign/core/Button';
import {VStack} from '@astryxdesign/core/VStack';시작하기 > 첫 컴포넌트 추가토큰 기반 스타일링
일반 CSS도 시스템 토큰을 참조하면 테마, 다크 모드, 중첩 Theme 범위와 함께 움직입니다.
background: var(--color-background-surface);
padding: var(--spacing-4);
border-radius: var(--radius-container);컴포넌트 스타일링CLI로 문서 탐색
컴포넌트 API, 토큰, 템플릿을 로컬 설치 버전 기준으로 확인합니다.
npx astryx component Button --dense
npx astryx docs layout --dense
npx astryx template --listAI와 함께 작업하기 / CLI93개 표시전체 93개34개 훅 색인
이름, 그룹, 설명, 키워드를 기준으로 필터링합니다.
콘텐츠Avatar
Avatar
Avatar는 사람이나 팀을 프로필 이미지, 이니셜, 기본 아이콘으로 표현합니다.
6 props 2 targets
@astryxdesign/core/Avatar콘텐츠Avatar
Avatar Group
Avatar Group는 여러 사용자를 겹쳐진 아바타 묶음으로 표시합니다.
5 props 1 targets
@astryxdesign/core/AvatarGroup피드백과 상태Badge
Badge
Badge는 상태, 분류, 짧은 메타데이터를 한눈에 보이게 강조합니다.
3 props 1 targets
@astryxdesign/core/Badge피드백과 상태Banner
Banner
Banner는 페이지나 섹션 안에 오래 남아야 하는 시스템 메시지를 보여줍니다.
11 props 2 targets
@astryxdesign/core/Banner콘텐츠Blockquote
Blockquote
Blockquote는 인용문이나 강조 문장을 본문 흐름 안에서 구분합니다.
3 props 1 targets
@astryxdesign/core/Blockquote데이터 입력Calendar
Calendar
Calendar는 날짜나 날짜 범위를 달력 그리드에서 선택하게 합니다.
15 props 2 targets
@astryxdesign/core/Calendar컨테이너Card
Card
Card는 하나의 독립적인 정보 단위를 테두리와 배경으로 묶습니다.
7 props 1 targets
@astryxdesign/core/Card컨테이너Carousel
Carousel
Carousel는 가로 공간을 넘치는 항목들을 스크롤 가능한 행으로 보여줍니다.
12 props 1 targets
@astryxdesign/core/Carousel채팅Chat
Chat
Chat는 AI 또는 사람 간 대화 화면을 구성하는 채팅 프리미티브 묶음입니다.
0 props 13 targets
@astryxdesign/core/Chat데이터 입력Checkbox
Checkbox Input
Checkbox Input는 단일 on/off 값을 체크박스로 입력받습니다.
19 props 2 targets
@astryxdesign/core/CheckboxInput데이터 입력Checkbox
Checkbox List
Checkbox List는 여러 선택지를 체크박스 목록으로 제공해 복수 선택을 지원합니다.
13 props 0 targets
@astryxdesign/core/CheckboxList콘텐츠Citation
Citation
Citation는 응답, 문서, 글 안에서 출처나 참고 링크를 인라인으로 표시합니다.
3 props 0 targets
@astryxdesign/core/Citation컨테이너Card
Clickable Card
Clickable Card는 카드 전체를 클릭 가능한 탐색 또는 실행 대상으로 만듭니다.
12 props 1 targets
@astryxdesign/core/ClickableCard콘텐츠CodeBlock
Code Block
Code Block는 코드를 줄 번호, 복사 동작, 문법 강조와 함께 표시합니다.
20 props 2 targets
@astryxdesign/core/CodeBlock컨테이너Collapsible
Collapsible
Collapsible는 트리거 뒤에 보조 콘텐츠를 접고 펼칩니다.
6 props 1 targets
@astryxdesign/core/Collapsible데이터 입력DateInput
Date Input
Date Input는 텍스트 입력과 달력 팝오버로 단일 날짜를 입력받습니다.
21 props 1 targets
@astryxdesign/core/DateInput데이터 입력DateInput
Date Range Input
Date Range Input는 시작일과 종료일을 한 쌍의 범위 값으로 입력받습니다.
22 props 1 targets
@astryxdesign/core/DateRangeInput데이터 입력DateInput
Date Time Input
Date Time Input는 날짜 선택과 시간 입력을 함께 제공해 일시 값을 입력받습니다.
26 props 1 targets
@astryxdesign/core/DateTimeInput콘텐츠EmptyState
Empty State
Empty State는 표시할 데이터가 없을 때 이유와 다음 행동을 안내합니다.
7 props 1 targets
@astryxdesign/core/EmptyState데이터 입력Field
Field
Field는 레이블, 설명, 오류 상태를 입력 컨트롤과 일관되게 묶습니다.
18 props 3 targets
@astryxdesign/core/Field데이터 입력Field
Field Status
Field Status는 폼 필드의 성공, 경고, 오류 메시지를 명확히 표시합니다.
4 props 1 targets
@astryxdesign/core/FieldStatus데이터 입력FileInput
File Input
File Input는 파일 선택, 드래그 앤 드롭, 선택된 파일 상태를 처리합니다.
19 props 1 targets
@astryxdesign/core/FileInput콘텐츠Icon
Icon
Icon는 아이콘을 시스템 크기와 색상 토큰에 맞춰 렌더링합니다.
3 props 1 targets
@astryxdesign/core/Icon데이터 입력Field
Input Group
Input Group는 입력 앞뒤의 접두사, 단위, 보조 요소를 함께 묶습니다.
12 props 1 targets
@astryxdesign/core/InputGroup테이블과 목록Item
Item
Item는 목록, 메뉴, 선택 컨트롤에서 공통으로 쓰는 항목 표현입니다.
20 props 1 targets
@astryxdesign/core/Item콘텐츠Kbd
Kbd
Kbd는 키보드 키나 단축키를 본문 안에서 시각적으로 구분합니다.
4 props 1 targets
@astryxdesign/core/Kbd유틸리티Utilities
Layer
Layer는 오버레이 계층과 포털 기반 렌더링을 안정적으로 관리합니다.
2 props 0 targets
@astryxdesign/core/Layer테이블과 목록List
List
List는 동일한 구조의 항목들을 순서 또는 불릿 목록으로 보여줍니다.
7 props 2 targets
@astryxdesign/core/List콘텐츠Markdown
Markdown
Markdown는 마크다운 콘텐츠를 디자인 시스템 스타일로 렌더링합니다.
16 props 1 targets
@astryxdesign/core/Markdown테이블과 목록MetadataList
Metadata List
Metadata List는 레이블과 값으로 이루어진 메타데이터를 읽기 쉽게 정렬합니다.
7 props 2 targets
@astryxdesign/core/MetadataList데이터 입력Selector
Multi Selector
Multi Selector는 여러 값을 검색하고 선택하는 복수 선택 컨트롤입니다.
24 props 1 targets
@astryxdesign/core/MultiSelector데이터 입력NumberInput
Number Input
Number Input는 숫자 값을 입력하고 범위나 상태를 함께 검증합니다.
27 props 1 targets
@astryxdesign/core/NumberInput테이블과 목록OverflowList
Overflow List
Overflow List는 공간이 부족할 때 항목 일부를 오버플로 메뉴로 접습니다.
7 props 1 targets
@astryxdesign/core/OverflowList데이터 입력PowerSearch
Power Search
Power Search는 필터와 조건을 조합해 복잡한 검색 UI를 구성합니다.
20 props 0 targets
@astryxdesign/core/PowerSearch피드백과 상태ProgressBar
Progress Bar
Progress Bar는 작업 진행률이나 완료 상태를 막대로 보여줍니다.
10 props 2 targets
@astryxdesign/core/ProgressBar데이터 입력Radio
Radio List
Radio List는 여러 선택지 중 하나만 고르는 라디오 목록을 제공합니다.
16 props 4 targets
@astryxdesign/core/RadioList컨테이너Card
Selectable Card
Selectable Card는 카드 형태의 선택지를 눌러 선택 상태를 유지합니다.
11 props 1 targets
@astryxdesign/core/SelectableCard데이터 입력Selector
Selector
Selector는 단일 값을 목록이나 검색으로 선택하는 컨트롤입니다.
19 props 2 targets
@astryxdesign/core/Selector피드백과 상태Skeleton
Skeleton
Skeleton는 데이터 로딩 중 실제 레이아웃과 비슷한 자리 표시자를 보여줍니다.
4 props 1 targets
@astryxdesign/core/Skeleton데이터 입력Slider
Slider
Slider는 연속적인 숫자 값을 드래그로 조절하게 합니다.
22 props 3 targets
@astryxdesign/core/Slider피드백과 상태Spinner
Spinner
Spinner는 짧은 비동기 작업의 진행 중 상태를 표시합니다.
5 props 1 targets
@astryxdesign/core/Spinner피드백과 상태StatusDot
Status Dot
Status Dot는 간단한 상태를 작은 점과 색상으로 표현합니다.
5 props 1 targets
@astryxdesign/core/StatusDot데이터 입력Switch
Switch
Switch는 저장 버튼 없이 즉시 적용되는 on/off 설정을 제공합니다.
20 props 3 targets
@astryxdesign/core/Switch테이블과 목록Table
Table
Table는 행과 열로 구성된 구조화 데이터를 표시합니다.
12 props 4 targets
@astryxdesign/core/Table콘텐츠Text
Text
Text는 본문, 보조 설명, 코드 텍스트의 위계를 일관되게 표현합니다.
17 props 2 targets
@astryxdesign/core/Text데이터 입력TextArea
Text Area
Text Area는 여러 줄 텍스트를 입력받는 폼 컨트롤입니다.
26 props 1 targets
@astryxdesign/core/TextArea데이터 입력TextInput
Text Input
Text Input는 짧은 한 줄 텍스트 값을 입력받는 폼 컨트롤입니다.
20 props 1 targets
@astryxdesign/core/TextInput콘텐츠Thumbnail
Thumbnail
Thumbnail는 파일, 이미지, 미디어의 작은 미리보기를 표시합니다.
11 props 1 targets
@astryxdesign/core/Thumbnail데이터 입력TimeInput
Time Input
Time Input는 시간 값을 직접 입력하거나 선택하게 합니다.
22 props 1 targets
@astryxdesign/core/TimeInput콘텐츠Timestamp
Timestamp
Timestamp는 시간 값을 상대 또는 절대 형식으로 표시합니다.
10 props 1 targets
@astryxdesign/core/Timestamp콘텐츠Token
Token
Token는 선택된 값, 필터, 태그를 작은 토큰 형태로 표시합니다.
12 props 1 targets
@astryxdesign/core/Token데이터 입력Tokenizer
Tokenizer
Tokenizer는 텍스트 입력 흐름 안에서 여러 토큰 값을 만들고 관리합니다.
29 props 1 targets
@astryxdesign/core/Tokenizer테이블과 목록TreeList
Tree List
Tree List는 계층형 데이터를 펼치고 접을 수 있는 트리 구조로 보여줍니다.
4 props 2 targets
@astryxdesign/core/TreeList데이터 입력Typeahead
Typeahead
Typeahead는 입력 중 검색 결과를 제안하고 하나의 값을 선택하게 합니다.
24 props 3 targets
@astryxdesign/core/Typeahead유틸리티VisuallyHidden
VisuallyHidden
VisuallyHidden는 시각적으로 숨기되 보조 기술에는 전달되는 텍스트를 제공합니다.
2 props 0 targets
@astryxdesign/core/VisuallyHidden레이아웃AppShell
App Shell
App Shell는 상단 내비게이션, 사이드 내비게이션, 콘텐츠 영역을 하나의 앱 프레임으로 묶습니다.
9 props 3 targets
@astryxdesign/core/AppShell레이아웃AspectRatio
Aspect Ratio
Aspect Ratio는 이미지, 영상, 임베드 같은 콘텐츠의 고정 비율 영역을 유지합니다.
3 props 1 targets
@astryxdesign/core/AspectRatio레이아웃Layout
Center
Center는 자식 요소를 가로 또는 세로 축의 중앙에 배치합니다.
8 props 1 targets
@astryxdesign/core/Center레이아웃Divider
Divider
Divider는 콘텐츠 그룹 사이의 시각적 구분선을 제공합니다.
5 props 1 targets
@astryxdesign/core/Divider레이아웃Layout
Form Layout
Form Layout는 폼 필드들을 일관된 방향과 간격으로 배치합니다.
3 props 1 targets
@astryxdesign/core/FormLayout레이아웃Layout
Grid
Grid는 반응형 열 구조로 항목을 균형 있게 배치합니다.
13 props 2 targets
@astryxdesign/core/Grid레이아웃Layout
Layout
Layout는 헤더, 패널, 콘텐츠, 푸터를 포함한 화면 구조를 만듭니다.
6 props 5 targets
@astryxdesign/core/Layout레이아웃Resizable
Resizable
Resizable는 사용자가 패널 크기를 직접 조절할 수 있는 영역을 만듭니다.
8 props 2 targets
@astryxdesign/core/Resizable레이아웃Layout
Section
Section는 페이지 콘텐츠를 제목과 설명이 있는 의미 단위로 나눕니다.
10 props 1 targets
@astryxdesign/core/Section레이아웃Layout
Stack
Stack는 자식 요소들을 방향과 간격에 맞춰 쌓아 배치합니다.
17 props 2 targets
@astryxdesign/core/Stack액션Button
Button
Button는 사용자가 실행할 수 있는 주요 또는 보조 명령을 제공합니다.
17 props 1 targets
@astryxdesign/core/Button액션Button
Button Group
Button Group는 관련된 버튼들을 하나의 명령 묶음으로 정렬합니다.
8 props 1 targets
@astryxdesign/core/ButtonGroup액션ContextMenu
Context Menu
Context Menu는 대상 요소에 연결된 보조 작업 메뉴를 표시합니다.
7 props 1 targets
@astryxdesign/core/ContextMenu액션DropdownMenu
Dropdown Menu
Dropdown Menu는 버튼이나 트리거에서 열리는 명령 목록을 제공합니다.
8 props 2 targets
@astryxdesign/core/DropdownMenu액션Button
Icon Button
Icon Button는 텍스트 없이 아이콘만으로 명확한 단일 작업을 제공합니다.
9 props 0 targets
@astryxdesign/core/IconButton액션Link
Link
Link는 다른 페이지나 외부 리소스로 이동하는 텍스트 링크를 제공합니다.
13 props 1 targets
@astryxdesign/core/Link액션MoreMenu
More Menu
More Menu는 보조 작업을 더보기 메뉴 안에 모아 제공합니다.
7 props 1 targets
@astryxdesign/core/MoreMenu액션SegmentedControl
Segmented Control
Segmented Control는 작은 선택지 집합에서 하나의 모드를 즉시 전환합니다.
9 props 2 targets
@astryxdesign/core/SegmentedControl액션Button
Toggle Button
Toggle Button는 누른 상태가 유지되는 단일 토글 작업을 제공합니다.
14 props 1 targets
@astryxdesign/core/ToggleButton액션Toolbar
Toolbar
Toolbar는 편집, 보기 전환, 실행 도구를 한 줄에 모읍니다.
9 props 1 targets
@astryxdesign/core/Toolbar내비게이션Breadcrumbs
Breadcrumbs
Breadcrumbs는 현재 위치까지의 상위 경로를 단계적으로 보여줍니다.
5 props 2 targets
@astryxdesign/core/Breadcrumbs내비게이션Navigation
Mobile Nav
Mobile Nav는 작은 화면에서 사용할 수 있는 모바일 내비게이션 패널입니다.
6 props 1 targets
@astryxdesign/core/MobileNav내비게이션Navigation
Nav Heading Menu
Nav Heading Menu는 내비게이션 제목에 연결된 전환 메뉴를 제공합니다.
4 props 0 targets
@astryxdesign/core/NavMenu내비게이션Navigation
Nav Icon
Nav Icon는 내비게이션 항목 안에서 쓰는 아이콘 표현을 맞춥니다.
1 props 1 targets
@astryxdesign/core/NavIcon내비게이션Outline
Outline
Outline는 문서나 페이지의 섹션 구조와 현재 위치를 보여줍니다.
6 props 2 targets
@astryxdesign/core/Outline내비게이션Pagination
Pagination
Pagination는 긴 결과 목록을 페이지 단위로 이동하게 합니다.
15 props 2 targets
@astryxdesign/core/Pagination내비게이션Navigation
Side Nav
Side Nav는 앱의 주요 섹션을 사이드바 형태로 탐색하게 합니다.
8 props 4 targets
@astryxdesign/core/SideNav내비게이션Tabs
Tab List
Tab List는 관련된 뷰들을 한 화면 안에서 탭으로 전환합니다.
8 props 6 targets
@astryxdesign/core/TabList내비게이션Navigation
Top Nav
Top Nav는 앱 상단의 전역 탐색과 주요 작업 영역을 제공합니다.
7 props 7 targets
@astryxdesign/core/TopNav오버레이Dialog
Alert Dialog
Alert Dialog는 파괴적이거나 되돌리기 어려운 작업을 확인해야 할 때 사용하는 대화상자입니다.
11 props 0 targets
@astryxdesign/core/AlertDialog오버레이CommandPalette
Command Palette
Command Palette는 명령, 페이지, 설정을 빠르게 검색하고 실행하는 팔레트를 제공합니다.
14 props 5 targets
@astryxdesign/core/CommandPalette오버레이Dialog
Dialog
Dialog는 현재 화면 위에 집중해야 하는 작업이나 정보를 띄웁니다.
9 props 1 targets
@astryxdesign/core/Dialog오버레이HoverCard
Hover Card
Hover Card는 호버나 포커스 시 보조 정보를 짧게 보여줍니다.
11 props 1 targets
@astryxdesign/core/HoverCard오버레이Lightbox
Lightbox
Lightbox는 이미지나 미디어를 확대 가능한 집중 보기로 표시합니다.
7 props 1 targets
@astryxdesign/core/Lightbox오버레이Overlay
Overlay
Overlay는 미디어나 카드 위에 제목, 상태, 행동을 겹쳐 표시합니다.
11 props 0 targets
@astryxdesign/core/Overlay오버레이Popover
Popover
Popover는 트리거 주변에 짧은 보조 콘텐츠나 작업을 띄웁니다.
16 props 1 targets
@astryxdesign/core/Popover오버레이Toast
Toast
Toast는 짧게 표시되는 비동기 피드백 메시지를 제공합니다.
8 props 1 targets
@astryxdesign/core/Toast오버레이Tooltip
Tooltip
Tooltip는 짧은 보조 설명을 호버나 포커스 시 표시합니다.
12 props 1 targets
@astryxdesign/core/Tooltip