# Core React Components Provided by Astryx: The Complete Guide to @astryxdesign/core

> Discover the core React components from Astryx, including Button, TextInput, Dialog, and more. Explore over 50 production-ready components for your next project.

- Repository: [Meta/astryx](https://github.com/facebook/astryx)
- Tags: getting-started
- Published: 2026-07-15

---

**The `@astryxdesign/core` package exports over 50 production-ready React components—including Button, TextInput, Dialog, Toast, HStack, and Grid—with all exports defined in [`packages/core/src/index.ts`](https://github.com/facebook/astryx/blob/main/packages/core/src/index.ts) according to the facebook/astryx source code.**

The Astryx design system provides a comprehensive, fully typed component library built for internal tools and consumer applications. Organized into logical categories from UI primitives to complex navigation patterns, these React components leverage the StyleX styling system and are implemented across dedicated directories under `packages/core/src/`.

## UI Primitives and Visual Elements

Astryx delivers foundational components for displaying content, user actions, and visual affordances. These are exported from the core entry point and implemented in their respective source files.

**Button components** include the standard **Button** ([`packages/core/src/Button/Button.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/Button/Button.tsx)) supporting variants, sizes, loading states, and link modes, alongside **IconButton** ([`packages/core/src/IconButton/IconButton.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/IconButton/IconButton.tsx)) for compact icon-driven actions.

**Content display** components comprise:
- **Badge** ([`packages/core/src/Badge/Badge.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/Badge/Badge.tsx)) for status indicators
- **Avatar** and **AvatarGroup** for user representations
- **Banner** and **Blockquote** for messaging and citations
- **Divider** for visual separation
- **Code** and **CodeBlock** for syntax highlighting
- **EmptyState** for zero-data scenarios
- **Spinner** ([`packages/core/src/Spinner/Spinner.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/Spinner/Spinner.tsx)) for loading indicators

**Accessibility utilities** include **VisuallyHidden** ([`packages/core/src/VisuallyHidden/VisuallyHidden.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/VisuallyHidden/VisuallyHidden.tsx)) for screen-reader-only content and **Tooltip** ([`packages/core/src/Tooltip/Tooltip.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/Tooltip/Tooltip.tsx)), which utilizes the `useTooltip` hook implementation.

## Layout and Container Components

The layout system provides StyleX-aware containers for building responsive interfaces.

**Flex and stack layouts**:
- **Box** ([`packages/core/src/Box/Box.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/Box/Box.tsx)) for generic containers
- **Stack** ([`packages/core/src/Stack/Stack.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/Stack/Stack.tsx)) for vertical stacking
- **HStack** ([`packages/core/src/Layout/HStack.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/Layout/HStack.tsx)) and **VStack** ([`packages/core/src/VStack/VStack.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/VStack/VStack.tsx)) for directional flex layouts

**Grid and structural**:
- **Grid** ([`packages/core/src/Grid/Grid.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/Grid/Grid.tsx)) for CSS grid implementations
- **Section** ([`packages/core/src/Section/Section.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/Section/Section.tsx)) for semantic page divisions
- **Toolbar** ([`packages/core/src/Toolbar/Toolbar.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/Toolbar/Toolbar.tsx)) for action bars

**Navigation shells**:
- **TopNav** ([`packages/core/src/TopNav/TopNav.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/TopNav/TopNav.tsx))
- **SideNav** ([`packages/core/src/SideNav/SideNav.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/SideNav/SideNav.tsx))
- **MobileNav** ([`packages/core/src/MobileNav/MobileNav.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/MobileNav/MobileNav.tsx))

**Utility layouts** include **Overlay** ([`packages/core/src/Overlay/Overlay.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/Overlay/Overlay.tsx)) for modal backdrops and **Skeleton** ([`packages/core/src/Skeleton/Skeleton.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/Skeleton/Skeleton.tsx)) for content loading placeholders.

## Form Controls and Inputs

Astryx provides a comprehensive suite of controlled input components for building complex forms.

**Text inputs**:
- **TextInput** ([`packages/core/src/TextInput/TextInput.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/TextInput/TextInput.tsx)) for single-line text
- **TextArea** ([`packages/core/src/TextArea/TextArea.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/TextArea/TextArea.tsx)) for multi-line content

**Selection controls**:
- **CheckboxInput** and **CheckboxList** ([`packages/core/src/CheckboxList/CheckboxList.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/CheckboxList/CheckboxList.tsx)) for boolean and multi-select options
- **RadioList** ([`packages/core/src/RadioList/RadioList.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/RadioList/RadioList.tsx)) for exclusive selection groups
- **Switch** ([`packages/core/src/Switch/Switch.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/Switch/Switch.tsx)) for toggle controls

**Specialized inputs**:
- **DateInput**, **DateTimeInput**, and **DateRangeInput** for temporal data
- **NumberInput** ([`packages/core/src/NumberInput/NumberInput.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/NumberInput/NumberInput.tsx)) for numeric values
- **FileInput** ([`packages/core/src/FileInput/FileInput.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/FileInput/FileInput.tsx)) for file uploads
- **Select** and **MultiSelect** ([`packages/core/src/MultiSelect/MultiSelect.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/MultiSelect/MultiSelect.tsx)) for dropdown selection
- **ToggleButton** ([`packages/core/src/ToggleButton/ToggleButton.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/ToggleButton/ToggleButton.tsx)) for stateful action buttons

## Navigation and Interactive Components

### Navigation Patterns

Complex wayfinding components support application hierarchy:

- **Breadcrumbs** ([`packages/core/src/Breadcrumbs/Breadcrumbs.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/Breadcrumbs/Breadcrumbs.tsx)) for hierarchical navigation
- **DropdownMenu** ([`packages/core/src/DropdownMenu/DropdownMenu.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/DropdownMenu/DropdownMenu.tsx)) and **ContextMenu** ([`packages/core/src/ContextMenu/ContextMenu.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/ContextMenu/ContextMenu.tsx)) for action lists
- **MoreMenu** ([`packages/core/src/MoreMenu/MoreMenu.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/MoreMenu/MoreMenu.tsx)) for overflow actions
- **CommandPalette** ([`packages/core/src/CommandPalette/CommandPalette.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/CommandPalette/CommandPalette.tsx)) for keyboard-driven command interfaces
- **TreeList** ([`packages/core/src/TreeList/TreeList.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/TreeList/TreeList.tsx)) for hierarchical data display

### Overlays and Feedback

Feedback components manage user notifications and modal interactions:

- **Toast** ([`packages/core/src/Toast/Toast.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/Toast/Toast.tsx)) with imperative `useToast` hook API
- **Dialog** ([`packages/core/src/Dialog/Dialog.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/Dialog/Dialog.tsx)) for generic modal containers
- **AlertDialog** ([`packages/core/src/AlertDialog/AlertDialog.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/AlertDialog/AlertDialog.tsx)) for accessible confirmation dialogs
- **Popover** ([`packages/core/src/Popover/Popover.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/Popover/Popover.tsx)) and **HoverCard** ([`packages/core/src/HoverCard/HoverCard.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/HoverCard/HoverCard.tsx)) for contextual content
- **ProgressBar** ([`packages/core/src/ProgressBar/ProgressBar.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/ProgressBar/ProgressBar.tsx)) for loading indicators

## Utility Components

Specialized utilities include **Kbd** ([`packages/core/src/Kbd/Kbd.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/Kbd/Kbd.tsx)) for keyboard shortcut display, **Token** ([`packages/core/src/Token/Token.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/Token/Token.tsx)) for token visualization, **Thumbnail** ([`packages/core/src/Thumbnail/Thumbnail.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/Thumbnail/Thumbnail.tsx)) for image previews, **Pagination** ([`packages/core/src/Pagination/Pagination.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/Pagination/Pagination.tsx)), and **StatusDot** ([`packages/core/src/StatusDot/StatusDot.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/StatusDot/StatusDot.tsx)).

## Implementation Examples

All components require the **Theme** provider from [`packages/core/src/theme/Theme.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/theme/Theme.tsx).

### Basic Button with Tooltip

```tsx
import {Button} from '@astryxdesign/core';
import {GearIcon} from '@astryxdesign/icons';

export function SettingsButton() {
  return (
    <Button
      label="Settings"
      variant="ghost"
      icon={<GearIcon />}
      isIconOnly
      tooltip="Open settings"
    />
  );
}

```

### Form with TextInput and DateInput

```tsx
import {TextInput, DateInput, Button} from '@astryxdesign/core';
import {useState} from 'react';

export function SampleForm() {
  const [name, setName] = useState('');
  const [date, setDate] = useState<Date | null>(null);

  const handleSubmit = async () => {
    await fetch('/api/save', {method: 'POST', body: JSON.stringify({name, date})});
  };

  return (
    <>
      <TextInput label="Name" value={name} onChange={e => setName(e.target.value)} />
      <DateInput label="Birthday" value={date} onChange={setDate} />
      <Button label="Save" variant="primary" clickAction={handleSubmit} />
    </>
  );
}

```

### Navigation with TopNav

```tsx
import {TopNav, DropdownMenu, DropdownMenuItem} from '@astryxdesign/core';

export function Header() {
  return (
    <TopNav
      logo={<img src="/logo.svg" alt="Astryx" />}
      items={[
        {label: 'Dashboard', href: '/'},
        {
          label: 'Account',
          render: (
            <DropdownMenu>
              <DropdownMenuItem href="/profile">Profile</DropdownMenuItem>
              <DropdownMenuItem href="/settings">Settings</DropdownMenuItem>
            </DropdownMenu>
          ),
        },
      ]}
    />
  );
}

```

### Toast Notification

```tsx
import {useToast, Button} from '@astryxdesign/core';

export function NotifyButton() {
  const {showToast} = useToast();

  return (
    <Button
      label="Show toast"
      clickAction={() => showToast({title: 'Saved', type: 'success'})}
    />
  );
}

```

## Summary

- **Entry Point**: All core React components are exported from [`packages/core/src/index.ts`](https://github.com/facebook/astryx/blob/main/packages/core/src/index.ts) in the `@astryxdesign/core` package.
- **Architecture**: Components are organized into UI primitives, layout utilities, form controls, navigation elements, and feedback widgets.
- **Key Files**: Critical implementations include [`Button/Button.tsx`](https://github.com/facebook/astryx/blob/main/Button/Button.tsx), [`TextInput/TextInput.tsx`](https://github.com/facebook/astryx/blob/main/TextInput/TextInput.tsx), [`Toast/Toast.tsx`](https://github.com/facebook/astryx/blob/main/Toast/Toast.tsx), and [`Theme/Theme.tsx`](https://github.com/facebook/astryx/blob/main/Theme/Theme.tsx).
- **Styling**: The library uses StyleX for consistent, theme-aware styling across all components.
- **Accessibility**: Components include accessibility features like `VisuallyHidden` and proper ARIA support.

## Frequently Asked Questions

### How do I import components from Astryx?

Import directly from the `@astryxdesign/core` package entry point. All components are named exports from [`packages/core/src/index.ts`](https://github.com/facebook/astryx/blob/main/packages/core/src/index.ts), allowing tree-shaking bundlers to include only used components.

### Which Astryx components handle form validation?

Form components like **TextInput**, **CheckboxInput**, and **DateInput** support standard React controlled patterns. The source in [`packages/core/src/TextInput/TextInput.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/TextInput/TextInput.tsx) shows support for validation states through props, while **Select** and **MultiSelect** provide compound validation patterns.

### What is the difference between Dialog and AlertDialog in Astryx?

According to the source code, **AlertDialog** ([`packages/core/src/AlertDialog/AlertDialog.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/AlertDialog/AlertDialog.tsx)) provides pre-configured accessibility patterns for destructive actions and confirmations, while **Dialog** ([`packages/core/src/Dialog/Dialog.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/Dialog/Dialog.tsx)) offers a generic modal container for custom content.

### How do I use the Toast notification system?

Astryx provides an imperative Toast API via the `useToast` hook exported from the core package. As shown in [`packages/core/src/Toast/Toast.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/Toast/Toast.tsx), you call `showToast()` with options including title, type, and duration, requiring the app to be wrapped in the Theme provider.