Introduction

Next

A fork of shadcn/ui rebuilt with React Aria Components. Beautifully designed, accessible components that you can copy and paste into your apps.

Beautifully designed components built with React Aria Components and Tailwind CSS.

Taki UI is a fork of shadcn/ui rebuilt with React Aria Components instead of Radix UI.

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

What do you mean by not a component library?

I mean you do not install it as a dependency. It is not available or distributed via npm.

Pick the components you need. Copy and paste the code into your project and customize to your needs. The code is yours.

Use this as a reference to build your own component libraries.

shadcn/ui

shadcn/ui offers beautifully designed components that you can copy and paste into your apps. Most components use Radix UI for their functionality.

Taki UI is a direct fork of the shadcn/ui codebase. It maintains the same design system, styling approach, and CLI tooling, but replaces Radix UI components with React Aria Components as the underlying primitive library.

This means you get:

  • The same beautiful design language and styling
  • The same familiar CLI commands and workflow
  • The same component registry and distribution system
  • But with React Aria Components' superior accessibility and mobile support

React Aria Components

React Aria Components is a library of unstyled React components built by Adobe. It provides production-ready components with built-in accessibility, internationalization, and interactions.

Key benefits:

  • Accessibility by Default: WCAG compliant with full keyboard navigation and screen reader support
  • Mobile Support: Unlike many libraries, includes proper mobile screen reader support
  • Unstyled: No CSS to override or fight against
  • Flexible: Full control over markup and styling
  • Type-Safe: Comprehensive TypeScript support

Compared to Radix UI

The biggest difference between React Aria and Radix UI is mobile screen reader support. React Aria provides comprehensive support for mobile screen readers, while Radix UI focuses primarily on desktop accessibility as defined in the ARIA Practices Guide.

Additionally, React Aria offers:

  • Built-in internationalization (i18n) support
  • Adaptive interactions (automatically handles touch vs mouse vs keyboard)
  • Advanced features like virtualization for large lists
  • Built and maintained by Adobe, powering their Spectrum design system

FAQ

Installation

Get started by running the init command to set up your project:

pnpm dlx shadcn@latest init

This will configure your project with the necessary dependencies and settings.

Then you can start adding components:

pnpm dlx shadcn@latest add button

The component will be added to your project and you can start using it:

import { Button } from "@/components/ui/button"
 
export default function App() {
  return <Button>Click me</Button>
}

You can now edit the component code in your project at components/ui/button.tsx and customize it to your needs.

Credit

  • shadcn - Taki UI is a fork of shadcn/ui. All design, styling, and architecture credit goes to the original project
  • React Aria Components - For the accessible component primitives that power Taki UI
  • Adobe - For building and maintaining React Aria Components
  • JollyUI - For demonstrating the viability of React Aria + shadcn/ui integration

Alternatives

Looking for other React Aria solutions? Check these out: