패키지 설치
core, neutral theme, CLI를 함께 설치해 컴포넌트, 테마, 문서 탐색을 한 번에 준비합니다.
npm install @astryxdesign/core @astryxdesign/theme-neutral @astryxdesign/cliGetting Started > InstallAstryx 전체 컴포넌트 카탈로그
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';Getting Started > Add the theme CSS첫 컴포넌트 사용
컴포넌트는 번들 크기와 의도를 위해 카테고리별 subpath에서 가져옵니다.
import {Button} from '@astryxdesign/core/Button';
import {VStack} from '@astryxdesign/core/VStack';Getting Started > Add your first component토큰 기반 스타일링
일반 CSS도 시스템 토큰을 참조하면 테마, 다크 모드, 중첩 Theme 범위와 함께 움직입니다.
background: var(--color-background-surface);
padding: var(--spacing-4);
border-radius: var(--radius-container);Styling ComponentsCLI로 문서 탐색
컴포넌트 API, 토큰, 템플릿을 로컬 설치 버전 기준으로 확인합니다.
npx astryx component Button --dense
npx astryx docs layout --dense
npx astryx template --listWorking with AI / CLI93 shown93 total34 hooks indexed
이름, 그룹, 설명, 키워드를 기준으로 필터링합니다.
ContentAvatar
Avatar
Avatar represents a person or team with a profile photo, initials, or a default icon. Use it in comment headers, contact lists, chat messages, user cards, and anywhere you need ...
6 props 2 targets
@astryxdesign/core/AvatarContentAvatar
Avatar Group
AvatarGroup displays multiple avatars in an overlapping row with an optional overflow indicator. Uses a compositional API: pass Avatar children directly so each avatar can carry...
5 props 1 targets
@astryxdesign/core/AvatarGroupFeedback & StatusBadge
Badge
Badge highlights a status or category at a glance. Use it sparingly: only when a value represents a distinct state (Active, Failed) or a grouping tag (Engineering, Design). Most...
3 props 1 targets
@astryxdesign/core/BadgeFeedback & StatusBanner
Banner
Banner shows a persistent message at the top of a page or section. Use it for form errors, system updates, maintenance notices, or success confirmations that the user needs to s...
11 props 2 targets
@astryxdesign/core/BannerContentBlockquote
Blockquote
A styled quotation block with an accent-colored left border and secondary text color. Use to highlight quoted content, testimonials, or excerpts.
3 props 1 targets
@astryxdesign/core/BlockquoteData InputCalendar
Calendar
Calendar lets the user pick a date or date range from a month grid. Use it in booking flows, scheduling UIs, date filters, or anywhere the user needs to see surrounding dates fo...
15 props 2 targets
@astryxdesign/core/CalendarContainerCard
Card
Card is a bordered, elevated container for discrete, self-contained items: things you could reorder, remove, or interact with independently. Cards are NOT the default layout too...
7 props 1 targets
@astryxdesign/core/CardContainerCarousel
Carousel
Carousel scrolls a row of items horizontally when they overflow the available width. Use it for card grids, image galleries, product lists, or any set of items that should be br...
12 props 1 targets
@astryxdesign/core/CarouselChatChat
Chat
Chat is a family of composable primitives for building AI and human chat experiences. Combine ChatLayout, ChatMessageList, ChatMessage, bubbles, system messages, tool calls, tok...
0 props 13 targets
@astryxdesign/core/ChatData InputCheckbox
Checkbox Input
CheckboxInput toggles a single on/off value. Use it for settings like "Enable notifications", terms acceptance, or opt-in choices. For multiple checkboxes in a group, use Checkb...
19 props 2 targets
@astryxdesign/core/CheckboxInputData InputCheckbox
Checkbox List
CheckboxList shows a small group of checkboxes so users can turn several options on or off at once. Place it in settings pages, filter panels, or forms where every choice should...
13 props 0 targets
@astryxdesign/core/CheckboxListContentCitation
Citation
Citations display inline references to external sources. Use them to attribute information within AI-generated responses, articles, or anywhere provenance and source links are n...
3 props 0 targets
@astryxdesign/core/CitationContainerCard
Clickable Card
An interactive card for navigation or action targets. Nested interactive elements work independently.
12 props 1 targets
@astryxdesign/core/ClickableCardContentCodeBlock
Code Block
CodeBlock renders syntax-highlighted code with line numbers, a copy button, and optional collapsible sections. Use CodeBlock for multi-line snippets like source files, terminal ...
20 props 2 targets
@astryxdesign/core/CodeBlockContainerCollapsible
Collapsible
Collapsible hides and reveals content behind a trigger button. Use it in settings panels, FAQ pages, or detail views to keep the page scannable while letting users drill into se...
6 props 1 targets
@astryxdesign/core/CollapsibleData InputDateInput
Date Input
DateInput lets the user type or pick a date from a calendar popover. Use it for scheduling, deadlines, booking dates, or any form field that needs a specific calendar date.
21 props 1 targets
@astryxdesign/core/DateInputData InputDateInput
Date Range Input
DateRangeInput lets users select a start and end date from a dual-month calendar popover. Use it for filtering data by time period, report generation, analytics dashboards, and ...
22 props 1 targets
@astryxdesign/core/DateRangeInputData InputDateInput
Date Time Input
DateTimeInput combines a calendar popover with a time input for selecting both a date and time in a single interaction flow. Use it for scheduling, event creation, deadline sett...
26 props 1 targets
@astryxdesign/core/DateTimeInputContentEmptyState
Empty State
EmptyState shows a placeholder when a content area has no data. Use it for empty lists, zero search results, first-time setups, or cleared inboxes. Always include a title and a ...
7 props 1 targets
@astryxdesign/core/EmptyStateData InputField
Field
Field is a low-level wrapper for custom, native, or third-party controls that do not already provide field label, description, and status UI. Use it when you need the Field shel...
18 props 3 targets
@astryxdesign/core/FieldData InputField
Field Status
FieldStatus renders validation feedback for fields and field-like controls. Use it directly for custom controls that need the same error, warning, or success presentation as Field.
4 props 1 targets
@astryxdesign/core/FieldStatusData InputFileInput
File Input
FileInput provides file upload with optional drag-and-drop support. Use it for single or multiple file selection with built-in validation for file type, size, and count. Pair wi...
19 props 1 targets
@astryxdesign/core/FileInputContentIcon
Icon
Icons are small visual symbols that represent actions, objects, or concepts. They improve scannability and reinforce meaning alongside text. Supports both direct SVG components ...
3 props 1 targets
@astryxdesign/core/IconData InputField
Input Group
InputGroup connects an input with prefix/suffix addons in a single visual unit. Use it for URL fields, currency inputs, search fields with action buttons, or any input that need...
12 props 1 targets
@astryxdesign/core/InputGroupTable & ListItem
Item
A single, flexible item primitive that unifies the "start content + label + description + end content" pattern across Astryx. Use it wherever you need a structured row: dropdown...
20 props 1 targets
@astryxdesign/core/ItemContentKbd
Kbd
Renders a keyboard shortcut as styled key badges. Use Kbd in tooltips, menus, and help text to show key combinations.
4 props 1 targets
@astryxdesign/core/KbdUtilityUtilities
Layer
Layer utilities provide the app-level provider used by overlay systems. Use LayerProvider at the app root for toast/layer configuration; use higher-level Popover, HoverCard, or ...
2 props 0 targets
@astryxdesign/core/LayerTable & ListList
List
A vertical collection of items with consistent spacing, dividers, and optional markers. Supports headers, icons, avatars, badges, and interactive items with click or link behavi...
7 props 2 targets
@astryxdesign/core/ListContentMarkdown
Markdown
Renders a markdown string as Astryx-styled components. Use Markdown for user-generated content, AI responses, and documentation; it handles headings, lists, tables, code blocks,...
16 props 1 targets
@astryxdesign/core/MarkdownTable & ListMetadataList
Metadata List
MetadataList displays key-value pairs for object attributes like quality, condition, and status, in a structured layout. Use it for detail panels, settings summaries, and record...
7 props 2 targets
@astryxdesign/core/MetadataListData InputSelector
Multi Selector
A checkbox dropdown for selecting multiple values from a list. Selected items can display as a count, labels, or badges. Use it for filtering or when presenting a finite set of ...
24 props 1 targets
@astryxdesign/core/MultiSelectorData InputNumberInput
Number Input
A form input for numeric values with built-in validation, min/max constraints, and step controls. Use NumberInput for quantities, measurements, percentages, and similar inputs.
27 props 1 targets
@astryxdesign/core/NumberInputTable & ListOverflowList
Overflow List
A horizontal list that automatically hides items when they exceed the available width. Use OverflowList for breadcrumbs, toolbars, tag lists, or any row that needs to collapse g...
7 props 1 targets
@astryxdesign/core/OverflowListData InputPowerSearch
Power Search
PowerSearch is a structured filter bar where each token represents a field, operator, and value. Use it for complex multi-dimensional filtering when users need to combine multip...
20 props 0 targets
@astryxdesign/core/PowerSearchFeedback & StatusProgressBar
Progress Bar
A horizontal bar showing the completion progress of a task. Use it for operations where the duration is known, or as an animated indicator when progress can't be calculated. Sup...
10 props 2 targets
@astryxdesign/core/ProgressBarData InputRadio
Radio List
A group of options where only one can be selected at a time. All options are visible at once, making it easy to compare choices. Use it when users need to pick one option from a...
16 props 4 targets
@astryxdesign/core/RadioListContainerCard
Selectable Card
A card that toggles between selected and unselected states with an accent border. For navigation use ClickableCard.
11 props 1 targets
@astryxdesign/core/SelectableCardData InputSelector
Selector
A dropdown selector for choosing a single value from a list of options. Supports labels, validation, descriptions, and required/optional states. Use it in forms and settings whe...
19 props 2 targets
@astryxdesign/core/SelectorFeedback & StatusSkeleton
Skeleton
An animated shimmer placeholder that previews the shape of content while it loads. Use it to build loading screens that match the layout of the real content. For content with un...
4 props 1 targets
@astryxdesign/core/SkeletonData InputSlider
Slider
A draggable control for selecting a numeric value or range within defined bounds. Supports single value and range selection, tick marks, custom value formatting, and vertical or...
22 props 3 targets
@astryxdesign/core/SliderFeedback & StatusSpinner
Spinner
An animated loading indicator for processes with unknown duration, such as data fetching or form submission. Supports visible labels, multiple sizes, and a dark background varia...
5 props 1 targets
@astryxdesign/core/SpinnerFeedback & StatusStatusDot
Status Dot
A small colored dot that communicates status like online/offline presence or severity levels. Supports five semantic variants and an optional pulse animation. Always pair with a...
5 props 1 targets
@astryxdesign/core/StatusDotData InputSwitch
Switch
A toggle control for on/off states that take effect immediately. Supports labels, descriptions, loading states, and validation. Use it for settings or preferences that apply ins...
20 props 3 targets
@astryxdesign/core/SwitchTable & ListTable
Table
Table displays structured data in rows and columns with consistent dimensionality. It supports rich cell content, sorting, selection, pagination, and column management through a...
12 props 4 targets
@astryxdesign/core/TableContentText
Text
Text renders styled body text and headings from the theme. Use Text with a semantic type for body copy, labels, and captions, and Heading for section titles that output the corr...
17 props 2 targets
@astryxdesign/core/TextData InputTextArea
Text Area
TextArea is a multi-line text input for collecting longer-form content like comments, descriptions, or messages. Use it when the expected input spans multiple lines. For shorter...
26 props 1 targets
@astryxdesign/core/TextAreaData InputTextInput
Text Input
TextInput collects short-form text like names, emails, or search queries. Use it for single-line values where the expected input is brief. Pair it with validation status to guid...
20 props 1 targets
@astryxdesign/core/TextInputContentThumbnail
Thumbnail
Thumbnail displays a compact, square preview of an image attachment. It shows a shimmer effect while uploading, the image on success, and a placeholder icon when no source is se...
11 props 1 targets
@astryxdesign/core/ThumbnailData InputTimeInput
Time Input
TimeInput lets users enter a time of day and converts it to a standard format. It also allows users to adjust times using the arrow keys. Use it in forms, scheduling flows, or a...
22 props 1 targets
@astryxdesign/core/TimeInputContentTimestamp
Timestamp
Timestamp formats a date or time value into human-readable text. Use it to show when something was created, updated, or is scheduled; picking relative for recency, absolute for ...
10 props 1 targets
@astryxdesign/core/TimestampContentToken
Token
Token is a small, inline element for representing discrete pieces of associated data, like tags, categories, or selections. Use it to label content, show active filters, or repr...
12 props 1 targets
@astryxdesign/core/TokenData InputTokenizer
Tokenizer
Tokenizer is a multi-select input that lets users search, select, and manage multiple items displayed as removable chips. Use it when users need to build a set of selections fro...
29 props 1 targets
@astryxdesign/core/TokenizerTable & ListTreeList
Tree List
An expandable tree structure for displaying hierarchical data with branch connector lines. Use it for file explorers, nested category browsers, or any interface that visualizes ...
4 props 2 targets
@astryxdesign/core/TreeListData InputTypeahead
Typeahead
A searchable input for selecting a single item from a large or dynamic dataset. Results appear as the user types, with support for async data sources, debounced search, and cust...
24 props 3 targets
@astryxdesign/core/TypeaheadUtilityVisuallyHidden
VisuallyHidden
Renders content in the accessibility tree while hiding it visually. Use for accessible names on icon-only controls, aria-live announcement regions, and supplementary screen-read...
2 props 0 targets
@astryxdesign/core/VisuallyHiddenLayoutAppShell
App Shell
The outermost layout for an application. Provides slots for top navigation, side navigation, banners, and main content. Use it as the root wrapper for every page. It handles res...
9 props 3 targets
@astryxdesign/core/AppShellLayoutAspectRatio
Aspect Ratio
Maintains a fixed width-to-height ratio for its children, regardless of screen size. Use it for media containers like videos, images, thumbnails, or any content that needs consi...
3 props 1 targets
@astryxdesign/core/AspectRatioLayoutLayout
Center
Center aligns content to the middle of its container. Use it for empty states, loading screens, login forms, or any content that should sit in the center of the available space.
8 props 1 targets
@astryxdesign/core/CenterLayoutDivider
Divider
A visual separator that divides content into distinct sections. Use to create clear boundaries between groups of related content, or to demarcate interactive regions within a la...
5 props 1 targets
@astryxdesign/core/DividerLayoutLayout
Form Layout
A layout container that arranges form fields with consistent spacing and direction. FormLayout handles where fields go, not state or submission. Wrap it in a <form> for that. Su...
3 props 1 targets
@astryxdesign/core/FormLayoutLayoutLayout
Grid
A CSS grid layout container for arranging children in rows and columns. Use Grid for card galleries, dashboards, and any multi-column layout. Supports fixed column counts and re...
13 props 2 targets
@astryxdesign/core/GridLayoutLayout
Layout
Layout provides composable components for building structured page shells with header, sidebar, content, and footer slots. Use Layout for full app layouts and HStack/VStack for ...
6 props 5 targets
@astryxdesign/core/LayoutLayoutResizable
Resizable
Hook-based resizable panel system. useResizable() manages size state and ResizeHandle provides the interactive pill-grip separator. Pass resize props to existing layout componen...
8 props 2 targets
@astryxdesign/core/ResizableLayoutLayout
Section
Section is the correct way to create page regions and group related content on a page. Use it for settings groups, form sections, sidebar areas, or any time you need visual sepa...
10 props 1 targets
@astryxdesign/core/SectionLayoutLayout
Stack
Stack arranges items in a row or column with consistent spacing. Use the gap prop to control the space between items.
17 props 2 targets
@astryxdesign/core/StackActionButton
Button
Button triggers an action when clicked. Use it for form submissions, confirmations, navigation, or any interaction that needs a clear call to action.
17 props 1 targets
@astryxdesign/core/ButtonActionButton
Button Group
ButtonGroup joins related actions into a single connected control. Use it when multiple buttons represent related choices or operations that belong together visually, like copy/...
8 props 1 targets
@astryxdesign/core/ButtonGroupActionContextMenu
Context Menu
A right-click context menu that appears at the cursor position. Use to provide contextual actions for specific elements or regions without cluttering the UI with visible buttons.
7 props 1 targets
@astryxdesign/core/ContextMenuActionDropdownMenu
Dropdown Menu
A dropdown menu that displays a list of actionable items in a popup triggered by a button. Use to present action options as a next step in a process, or to offer contextual acti...
8 props 2 targets
@astryxdesign/core/DropdownMenuActionButton
Icon Button
A button that shows only an icon with no visible text. Use IconButton in toolbars, table rows, and compact UI where space is tight and the icon is universally understood.
9 props 0 targets
@astryxdesign/core/IconButtonActionLink
Link
A styled anchor for inline and standalone text navigation. Supports external links, underline variants, tooltips, and custom link components for router integration. Use it for n...
13 props 1 targets
@astryxdesign/core/LinkActionMoreMenu
More Menu
MoreMenu is a three-dot button that opens a list of actions. Use it for secondary actions that don't need to be always visible, like in table rows, card headers, or toolbars.
7 props 1 targets
@astryxdesign/core/MoreMenuActionSegmentedControl
Segmented Control
A segmented button group that allows users to make a single selection from a small set of mutually exclusive options. Use SegmentedControl when all options should be visible at ...
9 props 2 targets
@astryxdesign/core/SegmentedControlActionButton
Toggle Button
ToggleButton switches between selected and unselected states to represent a persistent on/off choice. Use it standalone for binary actions like bold, mute, or favorite, or insid...
14 props 1 targets
@astryxdesign/core/ToggleButtonActionToolbar
Toolbar
Toolbar is a horizontal bar with left, center, and right areas. Use it for contextual actions within a content area (above a table, inside a card, or in a panel), not as a page-...
9 props 1 targets
@astryxdesign/core/ToolbarNavigationBreadcrumbs
Breadcrumbs
Breadcrumbs show a trail of links from the root to the current page. Use them at the top of detail pages, settings panels, or anywhere the user needs to see where they are and n...
5 props 2 targets
@astryxdesign/core/BreadcrumbsNavigationNavigation
Mobile Nav
A slide-out drawer for mobile navigation. MobileNav is the mobile counterpart to SideNav and accepts the same children. Use it on narrow viewports where a persistent sidebar is ...
6 props 1 targets
@astryxdesign/core/MobileNavNavigationNavigation
Nav Heading Menu
Accessible menu container and items for nav heading popovers. NavHeadingMenu provides role="menu" with keyboard navigation; NavHeadingMenuItem renders individual selectable item...
4 props 0 targets
@astryxdesign/core/NavMenuNavigationNavigation
Nav Icon
NavIcon is a circular icon container with an accent-colored background. Use it in navigation headers such as TopNavHeading and PageNavHeader to visually identify a section or ap...
1 props 1 targets
@astryxdesign/core/NavIconNavigationOutline
Outline
A table-of-contents sidebar for documentation pages, help centers, wikis, and long settings pages. Use it for navigation within a single page, not for app routes. Features a sli...
6 props 2 targets
@astryxdesign/core/OutlineNavigationPagination
Pagination
Pagination lets users step through pages of content. Place it below a table, list, or card grid so users can move forward and backward through results. Pick a variant to match t...
15 props 2 targets
@astryxdesign/core/PaginationNavigationNavigation
Side Nav
A sidebar navigation component for organizing application pages with sections, nested items, and icons. Use SideNav as the primary navigation when an app has 5 or more destinati...
8 props 4 targets
@astryxdesign/core/SideNavNavigationTabs
Tab List
TabList provides tab-style navigation for organizing content into categorized sections. Use it to let users switch between related views without leaving the page, with overflow ...
8 props 6 targets
@astryxdesign/core/TabListNavigationNavigation
Top Nav
TopNav is a horizontal navigation bar for product-level navigation in application headers. Use TopNav for 5 or fewer always-visible navigation items, or minimal navigation paire...
7 props 7 targets
@astryxdesign/core/TopNavOverlayDialog
Alert Dialog
AlertDialog asks the user to confirm a destructive or irreversible action before it happens. Use it for things like deleting content, revoking access, or discarding unsaved chan...
11 props 0 targets
@astryxdesign/core/AlertDialogOverlayCommandPalette
Command Palette
CommandPalette is a searchable dialog for quick access to commands, navigation, and actions. Use it as a keyboard-driven launcher powered by SearchSource for filtering and selec...
14 props 5 targets
@astryxdesign/core/CommandPaletteOverlayDialog
Dialog
Dialog displays a modal overlay that blocks interaction with the page until the user responds. Use it for delete confirmations, edit forms, terms acceptance, or any decision tha...
9 props 1 targets
@astryxdesign/core/DialogOverlayHoverCard
Hover Card
HoverCard shows additional information when the user hovers or focuses a trigger element. Use it for profile cards, link summaries, or inline definitions where the user needs mo...
11 props 1 targets
@astryxdesign/core/HoverCardOverlayLightbox
Lightbox
A fullscreen overlay for viewing images and videos at full resolution. Supports single-item and gallery modes with prev/next navigation, optional zoom and pan for images, and na...
7 props 1 targets
@astryxdesign/core/LightboxOverlayOverlay
Overlay
Overlay layers action or supporting content over media, cards, video, or other bounded surfaces with an optional scrim and reveal behavior.
11 props 0 targets
@astryxdesign/core/OverlayOverlayPopover
Popover
A click-triggered overlay anchored to a button or trigger element. Use it for secondary actions, inline confirmations, or supplementary information that does not warrant a full ...
16 props 1 targets
@astryxdesign/core/PopoverOverlayToast
Toast
Toast shows a brief, non-blocking notification to confirm an action or present temporary information. Use it for scenarios where the user needs feedback but not a decision, such...
8 props 1 targets
@astryxdesign/core/ToastOverlayTooltip
Tooltip
A short text hint that appears on hover or focus, anchored to a trigger element. Use it to describe icon-only buttons, show the full text of truncated labels, or provide supplem...
12 props 1 targets
@astryxdesign/core/Tooltip