{/* Copyright 2020 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License. */}

import {Layout} from '@react-spectrum/docs';
export default Layout;

import {Highlights, Hero} from '@react-spectrum/docs';
import heroNarrow from 'url:./assets/ReactSpectrumHome_Mobile_976x1025_1x.png';
import heroNarrow2x from 'url:./assets/ReactSpectrumHome_Mobile_976x1025_2x.png';
import heroNarrowWebp from 'url:./assets/ReactSpectrumHome_Mobile_976x1025_1x.webp';
import heroNarrow2xWebp from 'url:./assets/ReactSpectrumHome_Mobile_976x1025_2x.webp';
import heroWide from 'url:./assets/ReactSpectrumHome_976x445_1x.png';
import heroWide2x from 'url:./assets/ReactSpectrumHome_976x445_2x.png';
import heroWideWebp from 'url:./assets/ReactSpectrumHome_976x445_1x.webp';
import heroWide2xWebp from 'url:./assets/ReactSpectrumHome_976x445_2x.webp';
import {VisuallyHidden} from '@react-aria/visually-hidden';
import clsx from 'clsx';
import linkStyle from '@adobe/spectrum-css-temp/components/link/vars.css';
import styles from '@react-spectrum/docs/src/docs.css';
import typographyStyles from '@adobe/spectrum-css-temp/components/typography/vars.css';

---
description: A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
keywords: [react spectrum, react aria, react stately, design system]
---

# React Spectrum Libraries

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.

<p className={clsx(typographyStyles['spectrum-Body2'], styles.homeLinks)}>
  <a href="https://github.com/adobe/react-spectrum" className={clsx(linkStyle['spectrum-Link'], styles.link)}>GitHub</a>
</p>

<Hero
  narrow={heroNarrow}
  narrow2x={heroNarrow2x}
  narrowWebp={heroNarrowWebp}
  narrow2xWebp={heroNarrow2xWebp}
  wide={heroWide}
  wide2x={heroWide2x}
  wideWebp={heroWideWebp}
  wide2xWebp={heroWide2xWebp}
  alt="React Spectrum hero image" />

<Highlights items={[
  {
    title: 'React Spectrum',
    description: 'A React implementation of Spectrum, Adobe’s design system. Spectrum provides adaptive, accessible, and cohesive experiences for all Adobe applications.',
    url: './react-spectrum/index.html',
    urlText: <>Explore<VisuallyHidden elementType="span"> React Spectrum</VisuallyHidden></>
  },
  {
    title: 'React Aria',
    description: 'A library of React Hooks that provides accessible UI primitives for your design system.',
    url: './react-aria/index.html',
    urlText: <>Learn more<VisuallyHidden elementType="span"> about React Aria</VisuallyHidden></>
  },
  {
    title: 'React Stately',
    description: 'A library of React Hooks that provides cross-platform state management for your design system.',
    url: './react-stately/index.html',
    urlText: <>Get Started<VisuallyHidden elementType="span"> with React Stately</VisuallyHidden></>
  }
]} />