Copy-Paste UI Components with React Aria and Tailwind CSS – Kanpeki

Kanpeki is a collection of accessible, animated, customizable, copy-paste UI components built with React Aria and Tailwind CSS.

The UI components work in Next.js, Remix, and standard React setups. Ideal for teams building modern web applications where accessibility compliance matters.

Features

Next.js Installation

1. Start a new Next.js project with Turbopack and TypeScript support.

npx create-next-app@latest --tailwind --ts --empty --app --src-dir --turbopack

2. Run the shadcn initialization command to configure your project structure.

npx shadcn@latest init

3. Remove the default shadcn packages that Kanpeki replaces with modern alternatives.

npm remove class-variance-authority clsx tw-animate-css

4. Kanpeki uses CVA beta and tailwindcss-motion instead of the standard shadcn tooling. Delete src/lib/utils.ts if you have no other utilities in that file.

5. Open src/styles/globals.css and remove the tw-animate-css import line.

@import "tailwindcss";

6. Add components to your project using the shadcn CLI with the Kanpeki namespace.

npx shadcn@latest add @kanpeki/button

7. Import the button component in your page or component file.

import { Button } from "~/components/ui/button";
export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

Manual Installation

1. Install Tailwind CSS and add the required dependencies for component styling and utilities.

npm install cva@beta tailwind-merge tailwindcss-motion tailwindcss-react-aria-components -D

2. Configure your path aliases in tsconfig.json to match your preferred import style.

{
  "compilerOptions": {
    "paths": {
      "~/*": ["./src/*"]
    }
  }
}

3. Create your global CSS file with theme variables and plugin imports. This file defines colors, border radius values, and other design tokens.

@import "tailwindcss";
@plugin "tailwindcss-react-aria-components";
@plugin "tailwindcss-motion";
@custom-variant dark (&:is(.dark *));
@theme inline {
  --radius: 0.625rem;
  --color-background: light-dark(oklch(1 0 0), oklch(0.145 0 0));
  --color-foreground: light-dark(oklch(0.145 0 0), oklch(0.985 0 0));
  --color-primary: light-dark(oklch(0.205 0 0), oklch(0.922 0 0));
  --color-border: light-dark(oklch(0.922 0 0), oklch(1 0 0 / 10%));
}

4. Set up CVA in lib/cva.ts to handle class merging and variant management.

import { defineConfig } from "cva";
import { twMerge } from "tailwind-merge";
export const { cva, cx, compose } = defineConfig({
  hooks: {
    onComplete: (className) => twMerge(className),
  },
});

Available UI Components

Related Resources

• React Aria Components: Adobe’s library of unstyled, accessible UI primitives for React applications
• Tailwind CSS: Utility-first CSS framework for rapid UI development
• CVA (Class Variance Authority): Type-safe utility for managing component variants in TypeScript

FAQs

Q: How does Kanpeki differ from shadcn/ui?
A: Kanpeki uses React Aria Components as its foundation instead of Radix UI. React Aria handles accessibility primitives without imposing styles. Kanpeki also uses tailwindcss-motion for animations instead of tw-animate-css.

Q: Do I need to install Kanpeki as an npm package?
A: No. You copy component source code directly into your project using the shadcn CLI.

Q: Can I use Kanpeki with frameworks other than Next.js?
A: Yes. Kanpeki works with any React-based framework, including Remix, Vite, and Create React App. Follow the manual installation process for non-Next.js projects.

Q: What accessibility standards do these components meet?
A: React Aria Components implement WCAG 2.1 guidelines. The library handles keyboard navigation, screen reader announcements, focus management, and ARIA attributes automatically.

Q: How do I customize component styles after copying them?
A: Edit the component files directly in your project. Modify Tailwind classes, adjust the CVA configuration, or change the component structure as needed.