Core layout and theming components for application structure, visual hierarchy, and theme management in React Spectrum applications.
Application root component that provides theme, locale, and configuration context to all child components.
/**
* Provider component that establishes theme, locale, and routing context
* @param props - Provider configuration and children
* @returns JSX element wrapping the application
*/
function Provider(props: ProviderProps): JSX.Element;
interface ProviderProps {
/** Child components to render within the provider context */
children: React.ReactNode;
/** Theme object containing color schemes and styling tokens */
theme?: Theme;
/** Color scheme preference: light, dark, or auto (system preference) */
colorScheme?: "light" | "dark" | "auto";
/** BCP 47 language tag for internationalization */
locale?: string;
/** Router configuration for navigation integration */
router?: RouterConfig;
/** Scale factor for component sizing: medium or large */
scale?: "medium" | "large";
/** Default toast queue container for notifications */
toastContainer?: React.RefObject<HTMLElement>;
}Usage Examples:
import { Provider, defaultTheme, Button } from "@adobe/react-spectrum";
// Basic provider setup
function App() {
return (
<Provider theme={defaultTheme}>
<Button>Hello World</Button>
</Provider>
);
}
// Provider with color scheme and locale
function AppWithOptions() {
return (
<Provider
theme={defaultTheme}
colorScheme="dark"
locale="fr-FR"
scale="large"
>
<MyApplication />
</Provider>
);
}Hook for accessing provider context values within components.
/**
* Hook to access provider context values
* @returns Provider context containing theme, locale, and configuration
*/
function useProvider(): ProviderContext;
interface ProviderContext {
/** Current theme object */
theme: Theme;
/** Current color scheme */
colorScheme: "light" | "dark";
/** Current locale */
locale: string;
/** Current scale setting */
scale: "medium" | "large";
/** Current router configuration */
router?: RouterConfig;
}Base layout container component for content areas with consistent spacing and styling.
/**
* Base layout container with consistent spacing and styling
* @param props - View styling and content properties
* @returns JSX element as a layout container
*/
function View(props: ViewProps): JSX.Element;
interface ViewProps extends DOMProps, StyleProps {
/** Child elements to render within the view */
children?: React.ReactNode;
/** Element type to render (default: div) */
elementType?: React.ElementType;
/** Background color variant */
backgroundColor?: "default" | "subdued" | "emphasized";
/** Border style variant */
borderColor?: "default" | "subdued" | "emphasized";
/** Border width specification */
borderWidth?: "thin" | "thick" | DimensionValue;
/** Border radius specification */
borderRadius?: "small" | "medium" | "large" | DimensionValue;
/** Padding inside the view */
padding?: DimensionValue;
/** Margin outside the view */
margin?: DimensionValue;
/** Width of the view */
width?: DimensionValue;
/** Height of the view */
height?: DimensionValue;
/** Minimum width constraint */
minWidth?: DimensionValue;
/** Maximum width constraint */
maxWidth?: DimensionValue;
/** Minimum height constraint */
minHeight?: DimensionValue;
/** Maximum height constraint */
maxHeight?: DimensionValue;
/** Whether the view is hidden from screen readers */
isHidden?: boolean;
/** Role attribute for accessibility */
role?: string;
}Semantic layout components for organizing page structure with appropriate ARIA landmarks.
/**
* Header landmark component for page or section headers
* @param props - Header content and styling properties
* @returns JSX element with header landmark role
*/
function Header(props: HeaderProps): JSX.Element;
/**
* Main content landmark component
* @param props - Content area properties
* @returns JSX element with main landmark role
*/
function Content(props: ContentProps): JSX.Element;
/**
* Footer landmark component for page or section footers
* @param props - Footer content and styling properties
* @returns JSX element with contentinfo landmark role
*/
function Footer(props: FooterProps): JSX.Element;
interface HeaderProps extends ViewProps {}
interface ContentProps extends ViewProps {}
interface FooterProps extends ViewProps {}Flexbox layout container with responsive sizing and alignment options.
/**
* Flexbox layout container with responsive alignment and spacing
* @param props - Flex layout configuration and content
* @returns JSX element configured as flex container
*/
function Flex(props: FlexProps): JSX.Element;
interface FlexProps extends ViewProps {
/** Flex direction: row, column, row-reverse, column-reverse */
direction?: "row" | "column" | "row-reverse" | "column-reverse";
/** Whether flex items should wrap to new lines */
wrap?: boolean | "wrap" | "nowrap" | "wrap-reverse";
/** Alignment of items along the main axis */
justifyContent?: "start" | "end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch";
/** Alignment of items along the cross axis */
alignItems?: "start" | "end" | "center" | "stretch" | "baseline";
/** Alignment of wrapped lines */
alignContent?: "start" | "end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch";
/** Gap between flex items */
gap?: DimensionValue;
/** Gap between columns (when direction is row) */
columnGap?: DimensionValue;
/** Gap between rows (when direction is column) */
rowGap?: DimensionValue;
}Usage Examples:
// Horizontal button layout
<Flex direction="row" justifyContent="space-between" gap="size-200">
<Button>Cancel</Button>
<Button variant="accent">Save</Button>
</Flex>
// Vertical form layout
<Flex direction="column" gap="size-300">
<TextField label="Name" />
<TextField label="Email" />
<Button>Submit</Button>
</Flex>CSS Grid layout container with responsive grid configuration.
/**
* CSS Grid layout container with responsive configuration
* @param props - Grid layout specification and content
* @returns JSX element configured as grid container
*/
function Grid(props: GridProps): JSX.Element;
interface GridProps extends ViewProps {
/** Grid template areas definition */
areas?: string[] | string;
/** Grid template rows specification */
rows?: string | string[];
/** Grid template columns specification */
columns?: string | string[];
/** Gap between grid items */
gap?: DimensionValue;
/** Gap between columns */
columnGap?: DimensionValue;
/** Gap between rows */
rowGap?: DimensionValue;
/** Alignment of items within grid cells */
justifyItems?: "start" | "end" | "center" | "stretch";
/** Alignment of items within grid cells along cross axis */
alignItems?: "start" | "end" | "center" | "stretch" | "baseline";
/** Alignment of grid within container */
justifyContent?: "start" | "end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch";
/** Alignment of grid within container along cross axis */
alignContent?: "start" | "end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch";
}Utility functions for defining CSS Grid track sizing.
/**
* CSS Grid fit-content() function for responsive track sizing
* @param value - Maximum size for the track
* @returns Grid track sizing value
*/
function fitContent(value: DimensionValue): string;
/**
* CSS Grid minmax() function for flexible track sizing
* @param min - Minimum track size
* @param max - Maximum track size
* @returns Grid track sizing value
*/
function minmax(min: DimensionValue, max: DimensionValue): string;
/**
* CSS Grid repeat() function for repetitive track patterns
* @param count - Number of repetitions or "auto-fill"/"auto-fit"
* @param tracks - Track sizing pattern to repeat
* @returns Grid track sizing value
*/
function repeat(count: number | "auto-fill" | "auto-fit", tracks: string): string;Usage Examples:
// Responsive card grid
<Grid
columns={repeat("auto-fit", minmax("300px", "1fr"))}
gap="size-200"
>
<Card>Card 1</Card>
<Card>Card 2</Card>
<Card>Card 3</Card>
</Grid>
// Dashboard layout with areas
<Grid
areas={[
"header header",
"sidebar content",
"footer footer"
]}
rows={["auto", "1fr", "auto"]}
columns={["200px", "1fr"]}
>
<Header gridArea="header">Dashboard</Header>
<View gridArea="sidebar">Navigation</View>
<View gridArea="content">Main Content</View>
<Footer gridArea="footer">Footer</Footer>
</Grid>Visual separator component for creating content sections and visual hierarchy.
/**
* Visual separator for creating content sections
* @param props - Divider styling and orientation properties
* @returns JSX element as a visual separator
*/
function Divider(props: SpectrumDividerProps): JSX.Element;
interface SpectrumDividerProps extends DOMProps, StyleProps {
/** Orientation of the divider */
orientation?: "horizontal" | "vertical";
/** Visual weight of the divider */
size?: "S" | "M" | "L";
/** Margin spacing around the divider */
marginStart?: DimensionValue;
marginEnd?: DimensionValue;
marginTop?: DimensionValue;
marginBottom?: DimensionValue;
marginX?: DimensionValue;
marginY?: DimensionValue;
}Container component with emphasized background for grouping related content.
/**
* Container with emphasized background for content grouping
* @param props - Well styling and content properties
* @returns JSX element as content container
*/
function Well(props: SpectrumWellProps): JSX.Element;
interface SpectrumWellProps extends ViewProps {
/** Role attribute for accessibility (default: "region") */
role?: string;
}React Spectrum provides three built-in theme objects for different visual styles.
/** Default Spectrum theme with medium scale and light colors */
const defaultTheme: Theme;
/** Light theme variant optimized for light backgrounds */
const lightTheme: Theme;
/** Dark theme variant optimized for dark backgrounds */
const darkTheme: Theme;Usage Examples:
import { Provider, defaultTheme, lightTheme, darkTheme } from "@adobe/react-spectrum";
// Using default theme
<Provider theme={defaultTheme}>
<App />
</Provider>
// Dynamic theme switching
function ThemedApp() {
const [isDark, setIsDark] = useState(false);
return (
<Provider theme={isDark ? darkTheme : lightTheme}>
<Button onPress={() => setIsDark(!isDark)}>
Toggle Theme
</Button>
<App />
</Provider>
);
}/**
* Provider for server-side rendering support and hydration
* @param props - SSR configuration properties
* @returns JSX element wrapping SSR-compatible content
*/
function SSRProvider(props: SSRProviderProps): JSX.Element;
interface SSRProviderProps {
/** Child components requiring SSR support */
children: React.ReactNode;
}/**
* Component to visually hide content while keeping it accessible to screen readers
* @param props - Content and accessibility properties
* @returns JSX element that is visually hidden but accessible
*/
function VisuallyHidden(props: VisuallyHiddenProps): JSX.Element;
interface VisuallyHiddenProps {
/** Content to hide visually but keep accessible */
children: React.ReactNode;
/** Element type to render (default: span) */
elementType?: React.ElementType;
}
interface VisuallyHiddenAria {
/** ARIA props for visually hidden content */
"aria-hidden"?: boolean;
}/** Flexible dimension value for spacing and sizing */
type DimensionValue = string | number;
/** Theme object containing design tokens and styling information */
interface Theme {
/** Color definitions for light and dark schemes */
colors: ColorScheme;
/** Typography scale and font definitions */
typography: Typography;
/** Spacing scale for consistent layouts */
spacing: Spacing;
/** Component-specific styling tokens */
components: ComponentTokens;
}
/** Base properties for DOM elements */
interface DOMProps {
/** Element ID for DOM targeting */
id?: string;
}
/** Base styling properties with escape hatches */
interface StyleProps {
/** Unsafe direct className override */
UNSAFE_className?: string;
/** Unsafe direct style override */
UNSAFE_style?: React.CSSProperties;
}
/** Router integration configuration */
interface RouterConfig {
/** Function to programmatically navigate */
navigate?: (path: string) => void;
/** Function to resolve href values */
useHref?: (href: string) => string;
}Component for displaying SVG icons with proper sizing and accessibility.
/**
* Component for displaying SVG icons with proper sizing and accessibility
* @param props - Icon configuration and content properties
* @returns JSX element as styled icon
*/
function Icon(props: IconProps): JSX.Element;
interface IconProps {
/** Icon SVG content */
children: React.ReactNode;
/** Icon size */
size?: "XXS" | "XS" | "S" | "M" | "L" | "XL" | "XXL";
/** Icon color */
color?: "positive" | "notice" | "negative" | "informative" | "neutral";
/** Whether icon should be hidden from screen readers */
isHidden?: boolean;
}Component for displaying images with responsive sizing and loading states.
/**
* Component for displaying images with responsive sizing and loading states
* @param props - Image configuration and content properties
* @returns JSX element as styled image
*/
function Image(props: SpectrumImageProps): JSX.Element;
interface SpectrumImageProps {
/** Image source URL */
src: string;
/** Alternative text for accessibility */
alt: string;
/** Image width */
width?: DimensionValue;
/** Image height */
height?: DimensionValue;
/** Object fit behavior */
objectFit?: "fill" | "contain" | "cover" | "none" | "scale-down";
/** Loading behavior */
loading?: "eager" | "lazy";
}Visual separator component for creating section breaks and content grouping.
/**
* Visual separator component for creating section breaks
* @param props - Divider configuration and styling properties
* @returns JSX element as visual divider
*/
function Divider(props: SpectrumDividerProps): JSX.Element;
interface SpectrumDividerProps {
/** Divider orientation */
orientation?: "horizontal" | "vertical";
/** Divider size */
size?: "S" | "M" | "L";
/** Whether divider should be static color */
staticColor?: "white" | "black";
}Text presentation components for typography and content display.
/**
* Heading component for text hierarchy and semantic structure
* @param props - Heading configuration and content properties
* @returns JSX element as semantic heading
*/
function Heading(props: HeadingProps): JSX.Element;
/**
* Text component for body content and inline text
* @param props - Text configuration and content properties
* @returns JSX element as styled text
*/
function Text(props: TextProps): JSX.Element;
/**
* Keyboard component for displaying keyboard shortcuts and keys
* @param props - Keyboard configuration and content properties
* @returns JSX element as keyboard notation
*/
function Keyboard(props: KeyboardProps): JSX.Element;
interface HeadingProps {
/** Heading content */
children: React.ReactNode;
/** Heading level (semantic) */
level?: 1 | 2 | 3 | 4 | 5 | 6;
/** Visual size (independent of semantic level) */
size?: "XXS" | "XS" | "S" | "M" | "L" | "XL" | "XXL" | "XXXL";
/** Text color */
color?: "neutral" | "negative" | "positive" | "notice" | "informative";
/** Text margin behavior */
marginTop?: "auto" | "size-0" | "size-10" | "size-25" | "size-40" | "size-50" | "size-65" | "size-75" | "size-85" | "size-100" | "size-115" | "size-125" | "size-130" | "size-160" | "size-200" | "size-225" | "size-250" | "size-300" | "size-400" | "size-450" | "size-500" | "size-600" | "size-675" | "size-700" | "size-800" | "size-900" | "size-1000" | "size-1200" | "size-1250" | "size-1600" | "size-1700" | "size-2000" | "size-2400" | "size-3000" | "size-3400" | "size-3600" | "size-4600" | "size-5000" | "size-6000";
marginBottom?: "auto" | "size-0" | "size-10" | "size-25" | "size-40" | "size-50" | "size-65" | "size-75" | "size-85" | "size-100" | "size-115" | "size-125" | "size-130" | "size-160" | "size-200" | "size-225" | "size-250" | "size-300" | "size-400" | "size-450" | "size-500" | "size-600" | "size-675" | "size-700" | "size-800" | "size-900" | "size-1000" | "size-1200" | "size-1250" | "size-1600" | "size-1700" | "size-2000" | "size-2400" | "size-3000" | "size-3400" | "size-3600" | "size-4600" | "size-5000" | "size-6000";
}
interface TextProps {
/** Text content */
children: React.ReactNode;
/** Text size */
size?: "XXS" | "XS" | "S" | "M" | "L" | "XL" | "XXL" | "XXXL";
/** Text color */
color?: "neutral" | "negative" | "positive" | "notice" | "informative";
/** Text margin behavior */
marginTop?: "auto" | "size-0" | "size-10" | "size-25" | "size-40" | "size-50" | "size-65" | "size-75" | "size-85" | "size-100" | "size-115" | "size-125" | "size-130" | "size-160" | "size-200" | "size-225" | "size-250" | "size-300" | "size-400" | "size-450" | "size-500" | "size-600" | "size-675" | "size-700" | "size-800" | "size-900" | "size-1000" | "size-1200" | "size-1250" | "size-1600" | "size-1700" | "size-2000" | "size-2400" | "size-3000" | "size-3400" | "size-3600" | "size-4600" | "size-5000" | "size-6000";
marginBottom?: "auto" | "size-0" | "size-10" | "size-25" | "size-40" | "size-50" | "size-65" | "size-75" | "size-85" | "size-100" | "size-115" | "size-125" | "size-130" | "size-160" | "size-200" | "size-225" | "size-250" | "size-300" | "size-400" | "size-450" | "size-500" | "size-600" | "size-675" | "size-700" | "size-800" | "size-900" | "size-1000" | "size-1200" | "size-1250" | "size-1600" | "size-1700" | "size-2000" | "size-2400" | "size-3000" | "size-3400" | "size-3600" | "size-4600" | "size-5000" | "size-6000";
}
interface KeyboardProps {
/** Keyboard key or shortcut text */
children: React.ReactNode;
}