CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-adobe--react-spectrum

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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>>[];
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@adobe/react-spectrum@3.44.x
Publish Source
CLI
Badge
tessl/npm-adobe--react-spectrum badge