https://github.com/reakit/reakit

Toolkit for building accessible web apps with React
https://github.com/reakit/reakit

a11y accessibility accessible aria ariakit components react reactjs reakit wai-aria

Last synced: about 1 month ago
JSON representation

Toolkit for building accessible web apps with React

• Host: GitHub
• URL: https://github.com/reakit/reakit
• Owner: ariakit
• License: mit
• Created: 2017-09-19T22:00:42.000Z (about 7 years ago)
• Default Branch: main
• Last Pushed: 2024-05-19T06:03:45.000Z (7 months ago)
• Last Synced: 2024-05-19T16:03:16.263Z (7 months ago)
• Topics: a11y, accessibility, accessible, aria, ariakit, components, react, reactjs, reakit, wai-aria
• Language: TypeScript
• Homepage: https://ariakit.org
• Size: 97.7 MB
• Stars: 7,654
• Watchers: 53
• Forks: 365
• Open Issues: 94
• Metadata Files:
  • Readme: readme.md
  • Changelog: CHANGELOG.md
  • Contributing: contributing.md
  • Funding: .github/funding.yml
  • License: license
  • Code of conduct: code_of_conduct.md

Awesome Lists containing this project

• awesome-list - reakit
• awesome-react-components - reakit - [demo/docs](https://reakit.io/docs/button/) Toolkit for building accessible rich web apps (UI Frameworks / Responsive)
• awesome - reakit - Toolkit for building accessible rich web apps with React (TypeScript)
• awesome-react-components - reakit - [demo/docs](https://reakit.io/docs/button/) Toolkit for building accessible rich web apps (UI Frameworks / Responsive)
• awesome-react - reakit - Accessible, Composable and Customizable components for React.  (UI Frameworks / style)

README

        
Ariakit




  Toolkit for building accessible web apps with React.

  


  Explore website »








  

    

  

  

    

  

  

    

  

  


  

    

  

   

  

    

  

   

  

    

  






## Installation

npm:

```

npm i @ariakit/react

```

pnpm:

```

pnpm add @ariakit/react

```

Yarn:

```

yarn add @ariakit/react

```

## Usage

```jsx

import { useState } from "react";

import { createRoot } from "react-dom/client";

import { Button, Dialog, DialogHeading } from "@ariakit/react";

function App() {

  const [open, setOpen] = useState(false);

  return (

    <>

       setOpen(true)}>Open dialog

       setOpen(false)}>

        Ariakit

        
Welcome to Ariakit!

      

    >

  );

}


createRoot(document.getElementById("root")).render();

```

## Core Team

- [Diego Haz](https://x.com/diegohaz)

- [Ben Rodri](https://x.com/benrodrs)

## Attribution

Browser testing provided by



## Contributing

Follow the instructions on the [contributing guide](https://github.com/ariakit/ariakit/blob/main/contributing.md).