XDS Core
@xds/corev0.0.13
The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.Components (68)
AppShellThe outermost layout for an application. Provides slots for top navigation, side navigation, banners…
AspectRatioMaintains a fixed width-to-height ratio for its children, regardless of screen size. Use it for medi…
BadgeBadge shows a short label like a status, count, or category. Use it in table rows, list items, navig…
BannerBanner shows a persistent message at the top of a page or section. Use it for form errors, system up…
ButtonButtonButton triggers an action when clicked. Use it for form submissions, confirmations, navigation, or a…
CalendarCalendar lets the user pick a date or date range from a month grid. Use it in booking flows, schedul…
CardCardCard groups related content into a visually distinct container with a border and background. Use it …
CarouselCarousel scrolls a row of items horizontally when they overflow the available width. Use it for card…
CenterLayoutCenter aligns content to the middle of its container. Use it for empty states, loading screens, logi…
ChatDictationButtonChatChatDictationButton is a toggle button that starts and stops voice dictation inside a chat composer.…
ChatToolCallsChatChatToolCalls displays tool or function call invocations from an LLM response. Pass an array of call…
CheckboxInputCheckboxCheckboxInput toggles a single on/off value. Use it for settings like "Enable notifications", terms …
ClickableCardAn interactive card for navigation or action targets. Nested interactive elements work independently…
DateInputDateInput lets the user type or pick a date from a calendar popover. Use it for scheduling, deadline…
DividerA visual separator that divides content into distinct sections. Use to create clear boundaries betwe…
EmptyStateEmptyState shows a placeholder when a content area has no data. Use it for empty lists, zero search …
FormLayoutLayoutA layout container that arranges form fields with consistent spacing and direction. FormLayout handl…
IconIcons are small visual symbols that represent actions, objects, or concepts. They improve scannabili…
IconButtonButtonA button that shows only an icon with no visible text. Use IconButton in toolbars, table rows, and c…
KbdRenders a keyboard shortcut as styled key badges. Use Kbd in tooltips, menus, and help text to show …
LinkProviderUtilitiesWraps your app to replace the default <a> tag with a framework-specific link component (e.g. Next.js…
MarkdownRenders a markdown string as XDS-styled components. Use Markdown for user-generated content, AI resp…
MediaThemeUtilitiesApplies a theme that adapts to the system light/dark preference via prefers-color-scheme.
MobileNavMobileNavA slide-out drawer for mobile navigation. MobileNav is the mobile counterpart to SideNav and accepts…
MoreMenuMoreMenu is a three-dot button that opens a list of actions. Use it for secondary actions that don't…
NavIconNavIcon is a circular icon container with an accent-colored background. Use it in navigation headers…
NumberInputA form input for numeric values with built-in validation, min/max constraints, and step controls. Us…
OverflowListA horizontal list that automatically hides items when they exceed the available width. Use OverflowL…
PaginationPagination lets users step through pages of content. Place it below a table, list, or card grid so u…
PowerSearchPowerSearch is a structured filter bar where each token represents a field, operator, and value. Use…
ProgressBarA horizontal bar showing the completion progress of a task. Use it for operations where the duration…
SectionLayoutSection is a container that is used to create visual separation. Use the default variant for standar…
SelectableCardA card that toggles between selected and unselected states with an accent border. For navigation use…
SkeletonAn animated shimmer placeholder that previews the shape of content while it loads. Use it to build l…
SliderA draggable control for selecting a numeric value or range within defined bounds. Supports single va…
SpinnerAn animated loading indicator for processes with unknown duration, such as data fetching or form sub…
StatusDotA small colored dot that communicates status like online/offline presence or severity levels. Suppor…
SwitchA toggle control for on/off states that take effect immediately. Supports labels, descriptions, load…
TextAreaTextArea is a multi-line text input for collecting longer-form content like comments, descriptions, …
TextInputTextInput collects short-form text like names, emails, or search queries. Use it for single-line val…
ThemeUtilitiesWraps a subtree with a specific XDS theme. Use at the app root or around sections that need a differ…
ThumbnailThumbnail displays a compact, square preview of an image attachment. It shows a shimmer effect while…
TimeInputTimeInput lets users enter a time of day and converts it to a standard format. It also allows users …
TimestampTimestamp formats a date or time value into human-readable text. Use it to show when something was c…
ToastToastToast shows a brief, non-blocking notification to confirm an action or present temporary information…
TokenToken is a small, inline element for representing discrete pieces of associated data — like tags, ca…
TokenizerTokenizer is a multi-select input that lets users search, select, and manage multiple items displaye…
useClickableContainerMakes a container element clickable while preserving nested interactive element behavior. Solves the…
useEntryAnimationReturns a StyleX style for animating an element on mount. Only animates when the element is dynamica…
useFocusTrapTraps focus within a container element following the WAI-ARIA dialog focus trap pattern. Listens to …
useGridFocusManages keyboard navigation within a 2D grid following the WAI-ARIA grid pattern. Supports arrow key…
useImageModeDetects whether an image is predominantly dark or light by sampling pixels via OffscreenCanvas. Uses…
useInputContainerMakes an input container wrapper clickable, delegating focus to the inner input/textarea when the us…
useListFocusManages keyboard navigation within a linear list following WAI-ARIA menu/listbox/toolbar patterns. S…
useMediaQuerySSR-safe media query hook that subscribes to window.matchMedia changes. Returns whether the given me…
useOverflowMeasures children rendered in a hidden container to determine how many fit in the available width wi…
useScrollLockLocks body scroll when active by pinning the body with position: fixed. This prevents background scr…
useScrollOverflowTracks scroll overflow state for a horizontally scrollable container. Returns a ref callback and sta…
useXDSCollapsibleReusable hook that encapsulates the collapsible state machine. Supports three modes: group-controlle…
useXDSHoverCardHeadless hook for hover-triggered floating cards. Builds on useXDSLayer with hover/focus intent dete…
useXDSLayerUtilitiesLayer is a core positioning hook for rendering overlay content using CSS Anchor Positioning and the …
useXDSPopoverHeadless hook for click-triggered popovers with focus trapping. Combines useXDSLayer with useFocusTr…
useXDSResizableResizableHook for adding drag-to-resize behavior to layout regions. Supports single-region and multi-region c…
useXDSStreamingTextSmooths bursty streamed text into a steady character-by-character reveal using requestAnimationFrame…