getting-started

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

July 15, 2026 facebook/astryx ↗

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 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) supporting variants, sizes, loading states, and link modes, alongside IconButton (packages/core/src/IconButton/IconButton.tsx) for compact icon-driven actions.

Content display components comprise:

Accessibility utilities include VisuallyHidden (packages/core/src/VisuallyHidden/VisuallyHidden.tsx) for screen-reader-only content and Tooltip (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:

Grid and structural:

Navigation shells:

Utility layouts include Overlay (packages/core/src/Overlay/Overlay.tsx) for modal backdrops and Skeleton (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:

Selection controls:

Specialized inputs:

Complex wayfinding components support application hierarchy:

Overlays and Feedback

Feedback components manage user notifications and modal interactions:

Utility Components

Specialized utilities include Kbd (packages/core/src/Kbd/Kbd.tsx) for keyboard shortcut display, Token (packages/core/src/Token/Token.tsx) for token visualization, Thumbnail (packages/core/src/Thumbnail/Thumbnail.tsx) for image previews, Pagination (packages/core/src/Pagination/Pagination.tsx), and StatusDot (packages/core/src/StatusDot/StatusDot.tsx).

Implementation Examples

All components require the Theme provider from packages/core/src/theme/Theme.tsx.

Basic Button with Tooltip

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

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} />
    </>
  );
}

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

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 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, TextInput/TextInput.tsx, Toast/Toast.tsx, and 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, 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 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) provides pre-configured accessibility patterns for destructive actions and confirmations, while Dialog (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, you call showToast() with options including title, type, and duration, requiring the app to be wrapped in the Theme provider.

Have a question about this repo?

These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:

Share the following with your agent to get started:
curl -s "https://instagit.com/install.md"
Works with
Claude Codex Cursor VS Code OpenClaw Any MCP Client

Maintain an open-source project? Get it listed too →