On This Page
Cauldron React: Accessible Components Library
Purpose#
Friends don’t let friends ship inaccessible code! Cauldron is designed with accessibility in mind, including styles covering everything from typography to colors, and React components that are designed to be inclusive of all users. Additionally, Cauldron's React components are designed to include full screen reader and keyboard navigation support.
The design and interactions shown throughout this site are intended to show how Deque provides accessible experiences for the users of our own products - through the use of common, accessible components like these.
Usage#
Deque's design system contains two main libraries: Cauldron React, and Cauldron styles. Cauldron React is an accessible React component library, while Cauldron Styles contains the accessible styles for these components and more!
Installation#
To start using Cauldron React, install the packages with your package manager of choice:
npm#
npm install @deque/cauldron-react @deque/cauldron-styles
yarn#
yarn add @deque/cauldron-react @deque/cauldron-styles
Peer Dependencies#
There are a few additional packages that you will need to install:
react
at16.x
or higherreact-dom
at16.x
or higher
Setup#
Once installed, you will need to add include cauldron's styles somewhere in the top level of your application. You will also need to load the required font family of Roboto before cauldron styles. This can be using google fonts or with something like fontsource:
An example of this using the fontsource package and loading cauldron styles as follows:
import '@fontsource/roboto' // defaults as font-weight 400
import '@fontsource/roboto/500.css'
import '@deque/cauldron-styles'
import '@deque/cauldron-react/lib/cauldron.css'
Contribute#
If you're interested in contributing to Cauldron, you can check out our contribution guide as well as our code of conduct.
Did you find a bug or have a feature request? Open an issue!
More Accessibility Tools#
Don't stop here! Check out Deque Systems' axe Tools for all of your accessibility needs!