Introduction

This is NOT a component library. It's a collection of re-usable components that you can copy and paste into your apps.

BackchannelUI aims to take the components offered by shadcn-ui, and translate them to use react-aria-components where possible.

Its intended as an add-on essentially, but can work as a standalone. All components found in this library should work with your existing shadcn/ui components and theme.

shadcn-ui

shadcn-ui offers beautifully designed components that you can copy and paste into your apps. Many of the components use radix for functionality. These are the main focus for BackchannelUI to convert.

React Aria Components

react-aria-components is a library of unstyled React components that helps you build accessible, high quality UI components for your application or design system.

Adobe's team also has a great blog where you can learn about the making of React Aria Components. My personal favorite being the 3 part blog series on how to build a Button.

Compared to Radix

@devongovett The biggest difference between React Aria and most other libraries in regards to accessibility is support for mobile screen readers. The ARIA Practices Guide doesn't cover those, so any library that purely bases their implementation on it will miss some important functionality.

Set-up

Setup requires you doing the shadcn-ui set-up to generate your tailwind config. You can find these instructions here

Credit

• shadcn - For the styles
• react aria components - For the primitives.
• Radix Colors - For the theme customiser defaults
• ParkUI - For the theme customiser idea

Alternatives

• React Aria Components Official Starter Kits - Official Starter kits that include example implementations of all React Aria components with various styling solutions (e.g Tailwind).
• DraftUI - Copy paste components built with React Aria Components and Tailwind, No custom config/styles needed
• Baselayer.dev - Re-usable multi part components built on React Aria and TailwindCSS. Includes installing via VSCode.