or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

buttons-actions.mdcolor-management.mddata-display.mddata-management.mddate-time.mdform-controls.mdfoundation-layout.mdindex.mdinternationalization.mdoverlays-dialogs.mdprogress-status.mdselection-navigation.md
tile.json

tessl/npm-adobe--react-spectrum

Spectrum UI components in React providing a comprehensive library of accessible, adaptive UI components for building robust user experiences

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@adobe/react-spectrum@3.44.x

To install, run

npx @tessl/cli install tessl/npm-adobe--react-spectrum@3.44.0

index.mddocs/

React Spectrum

React Spectrum is a comprehensive React component library implementing Adobe's Spectrum design system. It provides 70+ accessible, internationalized UI components with complete TypeScript support, theming capabilities, and state management integration for building modern web applications.

Package Information

  • Package Name: @adobe/react-spectrum
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @adobe/react-spectrum

Core Imports

import { 
  Button, TextField, Provider, TableView, 
  Accordion, Disclosure, Form, Icon, Image 
} from "@adobe/react-spectrum";

For CommonJS:

const { 
  Button, TextField, Provider, TableView,
  Accordion, Disclosure, Form, Icon, Image
} = require("@adobe/react-spectrum");

Basic Usage

import { Provider, Button, TextField, defaultTheme } from "@adobe/react-spectrum";

function App() {
  return (
    <Provider theme={defaultTheme}>
      <TextField label="Name" placeholder="Enter your name" />
      <Button variant="cta" onPress={() => alert("Hello!")}>
        Submit
      </Button>
    </Provider>
  );
}

Architecture

React Spectrum is built around several core concepts:

  • Provider System: Theme and configuration provider wrapping your application
  • Spectrum Components: 70+ UI components following Spectrum design language
  • TypeScript Integration: Complete type definitions with Spectrum*Props interfaces
  • Accessibility: Built on React Aria foundation with full ARIA compliance
  • State Management: Integration with React Stately hooks for complex interactions
  • Theming: Customizable theme system with built-in light/dark theme support
  • Internationalization: Built-in i18n support with formatters and locale-aware components

Capabilities

Foundation & Layout

Core layout and theming components for application structure and visual hierarchy.

function Provider(props: ProviderProps): JSX.Element;
function View(props: ViewProps): JSX.Element;
function Flex(props: FlexProps): JSX.Element;
function Grid(props: GridProps): JSX.Element;

interface ProviderProps {
  children: React.ReactNode;
  theme?: Theme;
  colorScheme?: "light" | "dark" | "auto";
  locale?: string;
  router?: RouterConfig;
}

Foundation & Layout

Buttons & Actions

Interactive components for user actions including buttons, action groups, and contextual actions.

function Button(props: SpectrumButtonProps): JSX.Element;
function ActionButton(props: SpectrumActionButtonProps): JSX.Element;
function ActionGroup(props: SpectrumActionGroupProps): JSX.Element;
function ActionBar(props: SpectrumActionBarProps): JSX.Element;

interface SpectrumButtonProps {
  children: React.ReactNode;
  variant?: "accent" | "primary" | "secondary" | "negative";
  style?: "fill" | "outline";
  staticColor?: "white" | "black";
  isDisabled?: boolean;
  onPress?: (e: PressEvent) => void;
}

Buttons & Actions

Form Controls

Input components for data collection including text fields, selections, and validation.

function TextField(props: SpectrumTextFieldProps): JSX.Element;
function NumberField(props: SpectrumNumberFieldProps): JSX.Element;
function Checkbox(props: SpectrumCheckboxProps): JSX.Element;
function RadioGroup(props: SpectrumRadioGroupProps): JSX.Element;

interface SpectrumTextFieldProps {
  label?: React.ReactNode;
  value?: string;
  defaultValue?: string;
  placeholder?: string;
  description?: React.ReactNode;
  errorMessage?: React.ReactNode;
  isRequired?: boolean;
  isReadOnly?: boolean;
  isDisabled?: boolean;
  onChange?: (value: string) => void;
}

Form Controls

Selection & Navigation

Components for selection, navigation, and menu systems including pickers, menus, and breadcrumbs.

function Picker(props: SpectrumPickerProps): JSX.Element;
function ComboBox(props: SpectrumComboBoxProps): JSX.Element;
function Menu(props: SpectrumMenuProps): JSX.Element;
function Tabs(props: SpectrumTabsProps): JSX.Element;

interface SpectrumPickerProps<T> {
  label?: React.ReactNode;
  items?: Iterable<T>;
  children: (item: T) => React.ReactElement;
  selectedKey?: Key;
  defaultSelectedKey?: Key;
  onSelectionChange?: (key: Key) => void;
  isDisabled?: boolean;
}

Selection & Navigation

Data Display

Components for displaying structured data including tables, lists, and status indicators.

function Accordion(props: SpectrumAccordionProps): JSX.Element;
function Disclosure(props: SpectrumDisclosureProps): JSX.Element;
function TableView(props: SpectrumTableProps): JSX.Element;
function ListView(props: SpectrumListViewProps): JSX.Element;
function TreeView(props: SpectrumTreeViewProps): JSX.Element;
function Badge(props: SpectrumBadgeProps): JSX.Element;

interface SpectrumTableProps<T> {
  children: React.ReactElement<ColumnProps<T>>[];
  density?: "compact" | "regular" | "spacious";
  selectionMode?: SelectionMode;
  selectedKeys?: Selection;
  onSelectionChange?: (keys: Selection) => void;
  sortDescriptor?: SortDescriptor;
  onSortChange?: (descriptor: SortDescriptor) => void;
}

Data Display

Date & Time

Components for date and time input with internationalization support.

function DatePicker(props: SpectrumDatePickerProps): JSX.Element;
function DateRangePicker(props: SpectrumDateRangePickerProps): JSX.Element;
function Calendar(props: SpectrumCalendarProps): JSX.Element;
function TimeField(props: SpectrumTimeFieldProps): JSX.Element;

interface SpectrumDatePickerProps {
  label?: React.ReactNode;
  value?: DateValue;
  defaultValue?: DateValue;
  minValue?: DateValue;
  maxValue?: DateValue;
  isDateUnavailable?: (date: DateValue) => boolean;
  onChange?: (value: DateValue) => void;
}

Date & Time

Color Management

Comprehensive color selection and manipulation components with multiple input methods.

function ColorPicker(props: SpectrumColorPickerProps): JSX.Element;
function ColorArea(props: SpectrumColorAreaProps): JSX.Element;
function ColorWheel(props: SpectrumColorWheelProps): JSX.Element;
function parseColor(value: string): Color;

interface SpectrumColorPickerProps {
  label?: React.ReactNode;
  value?: Color;
  defaultValue?: Color | string;
  onChange?: (color: Color) => void;
  channel?: ColorChannel;
}

Color Management

Overlays & Dialogs

Modal and overlay components for contextual information and user interactions.

function Dialog(props: SpectrumDialogProps): JSX.Element;
function DialogTrigger(props: SpectrumDialogTriggerProps): JSX.Element;
function TooltipTrigger(props: SpectrumTooltipTriggerProps): JSX.Element;
function ToastQueue: {
  positive: (message: string, options?: ToastOptions) => void;
  negative: (message: string, options?: ToastOptions) => void;
  neutral: (message: string, options?: ToastOptions) => void;
  info: (message: string, options?: ToastOptions) => void;
};

interface SpectrumDialogProps {
  children: React.ReactNode;
  size?: "S" | "M" | "L" | "fullscreen" | "fullscreenTakeover";
  isDismissable?: boolean;
  onDismiss?: () => void;
}

Overlays & Dialogs

Progress & Status

Components for showing progress, status, and system feedback to users.

function ProgressBar(props: SpectrumProgressBarProps): JSX.Element;
function ProgressCircle(props: SpectrumProgressCircleProps): JSX.Element;
function Meter(props: SpectrumMeterProps): JSX.Element;
function StatusLight(props: SpectrumStatusLightProps): JSX.Element;

interface SpectrumProgressBarProps {
  label?: React.ReactNode;
  value?: number;
  minValue?: number;
  maxValue?: number;
  showValueLabel?: boolean;
  formatOptions?: Intl.NumberFormatOptions;
  isIndeterminate?: boolean;
}

Progress & Status

Data Management

Hooks and utilities for managing collections, async data, and drag & drop interactions.

function useListData<T>(options: ListOptions<T>): ListData<T>;
function useAsyncList<T>(options: AsyncListOptions<T>): AsyncListData<T>;
function useTreeData<T>(options: TreeOptions<T>): TreeData<T>;
function useDragAndDrop(options: DragAndDropOptions): DragAndDropHooks;

interface ListData<T> {
  items: T[];
  selectedKeys: Selection;
  setSelectedKeys: (keys: Selection) => void;
  append: (...items: T[]) => void;
  prepend: (...items: T[]) => void;
  insert: (index: number, ...items: T[]) => void;
  remove: (...keys: Key[]) => void;
  move: (key: Key, toIndex: number) => void;
}

Data Management

Internationalization

Hooks and utilities for formatting, localization, and international text processing.

function useLocale(): { locale: string; direction: "ltr" | "rtl" };
function useDateFormatter(options?: DateFormatterOptions): DateFormatter;
function useNumberFormatter(options?: Intl.NumberFormatOptions): Intl.NumberFormat;
function useCollator(options?: Intl.CollatorOptions): Intl.Collator;

interface DateFormatter {
  format: (date: Date) => string;
  formatToParts: (date: Date) => Intl.DateTimeFormatPart[];
  formatRange: (start: Date, end: Date) => string;
  formatRangeToParts: (start: Date, end: Date) => Intl.DateTimeFormatPart[];
  resolvedOptions: () => Intl.DateTimeFormatOptions;
}

Internationalization

Types

Core Types

type Key = string | number;
type Selection = "all" | Set<Key>;
type SelectionMode = "none" | "single" | "multiple";

interface RouterConfig {
  navigate?: (path: string) => void;
  useHref?: (href: string) => string;
}

interface PressEvent {
  type: "press";
  target: Element;
  pointerType: PointerType;
  altKey: boolean;
  ctrlKey: boolean;
  metaKey: boolean;
  shiftKey: boolean;
}

type PointerType = "mouse" | "pen" | "touch" | "keyboard" | "virtual";

Layout Types

type DimensionValue = string | number;

interface StyleProps {
  UNSAFE_className?: string;
  UNSAFE_style?: React.CSSProperties;
}

interface DOMProps {
  id?: string;
}

Collection Types

interface ItemProps<T = any> {
  key?: Key;
  textValue?: string;
  children: React.ReactNode;
}

interface SectionProps<T = any> {
  key?: Key;
  title?: React.ReactNode;
  children: React.ReactElement<ItemProps<T>>[];
}