Skip to content
You're viewing Canary docs
These docs may include unreleased components and props. View production docs for the latest stable release.
View production
Docs
Components
Templates
Themes
Playground
Get started
Search components
Components
Overview
App Shell
App Shell
App Shell
useAppShellMobile
Aspect Ratio
Avatar
Avatar
Avatar
Avatar Group
Avatar Group Overflow
Avatar Status Dot
Badge
Banner
Blockquote
Bottom Sheet
Bottom Sheet
Bottom Sheet
Bottom Sheet Switcher
Breadcrumbs
Breadcrumbs
Breadcrumb Item
Breadcrumbs
Button
Button
Button
Button Group
Icon Button
Toggle Button
Toggle Button Group
Calendar
Card
Card
Card
Clickable Card
Selectable Card
Carousel
Chat
Chat
Chat Composer
Chat Composer Drawer
Chat Composer Input
Chat Composer Token Element
Chat Dictation Button
Chat Layout
Chat Layout Scroll Button
Chat Message
Chat Message Bubble
Chat Message List
Chat Message Metadata
Chat Send Button
Chat System Message
Chat Tokenized Text
Chat Tool Calls
Checkbox
Checkbox
Checkbox Input
Checkbox List
Checkbox List Item
Citation
Code
Code Block
Collapsible
Collapsible
Collapsible
Collapsible Group
useCollapsible
Command Palette
Command Palette
Command Palette
Command Palette Empty
Command Palette Footer
Command Palette Group
Command Palette Input
Command Palette Item
Command Palette List
Context Menu
Context Menu
Context Menu
Context Menu Item
Date Input
Date Input
Date Input
Date Range Input
Date Time Input
Dialog
Dialog
Alert Dialog
Dialog
Dialog Header
useImperativeAlertDialog
useImperativeDialog
Divider
Drawer
Drawer
Drawer
Drawer Header
Dropdown Menu
Dropdown Menu
Dropdown Menu
Dropdown Menu Checkbox Item
Dropdown Menu Divider
Dropdown Menu Group
Dropdown Menu Item
Dropdown Menu Radio Group
Dropdown Menu Radio Item
Dropdown Menu Submenu
Empty State
Field
Field
Field
Field Label
Field Status
Input Group
Input Group Text
File Input
Heading
Hover Card
Hover Card
Hover Card
useHoverCard
Icon
Indicator
Indicator
Checkbox Indicator
Check Indicator
Radio Indicator
Info Tip
Item
Kbd
Layout
Layout
Center
Form Layout
Grid
Grid Span
H Stack
Layout
Layout Content
Layout Footer
Layout Header
Layout Panel
Section
Stack
Stack Item
V Stack
Lightbox
Link
List
List
List
List Item
Markdown
Metadata List
Metadata List
Metadata List
Metadata List Item
More Menu
Navigation
Navigation
Mobile Nav
Mobile Nav Toggle
Nav Heading Menu
Nav Icon
Side Nav
Side Nav Collapse Button
Side Nav Heading
Side Nav Item
Side Nav Section
Top Nav
Top Nav Heading
Top Nav Item
Top Nav Mega Menu
Top Nav Mega Menu Featured Card
Top Nav Mega Menu Item
Top Nav Menu
Number Input
Outline
Outline
Outline
useOutlineFromMarkdown
Overflow List
Overlay
Overlay
Overlay
useOverlay
Pagination
Popover
Popover
Popover
usePopover
Power Search
Progress Bar
Radio
Radio
Radio List
Radio List Item
Resizable
Resizable
Resize Handle
useResizable
Rich Text Editor
Scrollable Area
Segmented Control
Segmented Control
Segmented Control
Segmented Control Item
Selector
Selector
Complex Selector
Multi Selector
Selector
Selector Option
useCombobox
Skeleton
Slider
Spinner
Status Dot
Stepper
Stepper
Step
Stepper
Switch
Table
Table
Table
Table Body
Table Cell
Table Footer
Table Header
Table Header Cell
Table Row
Table Selection Toolbar
useTableColumnResize
useTableColumnSettings
useTableFiltering
useTableFilterState
useTableGroupedRows
useTablePagination
useTableRowExpansion
useTableRowIndex
useTableRowStatus
useTableSelection
useTableSelectionState
useTableSortable
useTableSortableState
useTableStickyColumns
useTableTreeData
useTableTreeState
Tabs
Tabs
Tab
Tab List
Tab Menu
Text
Text Area
Text Input
Thumbnail
Time Input
Timer
Timestamp
Toast
Toast
Toast
useToast
Token
Tokenizer
Toolbar
Tooltip
Tooltip
Tooltip
useTooltip
Tree List
Typeahead
Typeahead
Base Typeahead
Typeahead
Typeahead Item
useCalendarDays
useIcon
useLightbox
useLinkComponent
useMultiCombobox
VisuallyHidden
Utilities
Utilities
createAnimator
createPanGesture
Internationalization Provider
Layer Provider
Link Provider
Media Theme
Syntax Theme
Theme
useAnimatedLayout
useAnimator
useAnnounce
useClickableContainer
useClipboard
useCollator
useContainerReveal
useDevWarning
useEntryAnimation
useFocusTrap
useGridFocus
useHotkeys
useImageMode
useIndicatorFocusRing
useInputContainer
useInputStatusIcon
useInteractiveRole
useKeyboardHint
useLayer
useListFocus
useLocale
useLongPress
useMediaQuery
useMenuPress
useMergedRefs
useOverflow
usePanGesture
usePressFeedback
useScrollableArea
useScrollLock
useScrollOverflow
useStreamingText
useTheme
useTranslator
useTreeFocus
useTypeahead
Canary components
Charts
Charts
Charts
Charts
Chart
Chart Axis
Chart Grid
Chart Legend
Chart Swatch
Chart Tooltip
Lab
Lab
3D
3D
3D Bar
3D Chart
3D Scatter
3D Scatter GL
3D Surface
Charts
Charts
Chart Area
Chart Bar
Chart Candlestick
Chart Dot
Chart Dot GL
Chart Dot GL Interactive
Chart Heatmap GL
Chart Line
Chart Stream GL
Chat
Chat
Chat Emoji Picker
Chat Reaction Bar
Chat Reasoning
Chat Typing Indicator
Chat Unread Divider
Circle Check Indicator
Circular Progress
Code Editor
Comments
Comments
Comment Composer
Comment Pin
Comments
Comment Thread
Dialog Hero Header
Diff Viewer
Emoji Picker
List Input
Log Stream
Navigation Screen
Navigation Stack
Radial Chart
Sankey Chart
Schedule
Selectable Card Group
Selector
Selector
Transfer List
Transfer List Selector
Stat
SVG Icon
Tour
Tour Step
Vega
Vega
Vega Chart
Dialog Hero Header
Canary · @astryxdesign/lab v0.1.9 · DialogHeroHeader
Lab
· npm install @astryxdesign/lab@canary
Docs
Components
Templates
Themes
Playground
Storybook
Sandbox
Blog
Community
Changelog
Latest docs
Terms of use
Privacy policy
©2026 Meta Platforms, Inc.