1. Docs
  3. Introduction

Introduction

A set of perfect-designed components built on top of React Aria and Motion.

Kanpeki is a collection of beautifully designed, accessible, and composable components for your React apps. Built on top of React Aria Components and styled with Tailwind CSS, it's designed for you to copy, paste, and own.

We think React Aria Components is the best foundation for modern web applications. We've taken its powerful, accessible primitives and given them a design system that's ready to go, right out of the box.

How It Works

Our approach is simple: you should own your code. We're inspired by the copy-paste ethos of shadcn/ui.

Instead of installing a package, you get the source code. This means:

  • No abstractions: You have full control over how components look and behave.
  • Endless customization: Need to change something? Just edit the file.
  • Learn by doing: See how components are built and adapt them to your needs.

What do you mean by not a component library?

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.

Like shadcn/ui, but with React Aria

If you've used shadcn/ui, you'll feel right at home. The main difference is the foundation: shadcn/ui uses Radix UI, while Kanpeki uses React Aria Components.

We chose React Aria Components for its robust, accessible, and unopinionated primitives. It handles the hard parts—like accessibility, keyboard navigation, and focus management—without imposing any styles. This gives us the freedom to create a design system that is both beautiful and flexible.

Modern Tooling

Kanpeki uses modern tools that improve developer experience:

CVA Beta (Class Variance Authority)

Instead of the old class-variance-authority package, we use the new beta version simply called cva. This new version addresses one of the biggest complaints: the name was just too long.

Key improvements:

  • Simpler configuration: No more cn utility hack. Configure tailwind-merge directly:
lib/cva.ts
import { defineConfig } from "cva";
import { twMerge } from "tailwind-merge";

export const {
  cva,
  cx: cn,
  compose,
} = defineConfig({
  hooks: {
    onComplete: (className) => twMerge(className),
  },
});

Compare this to the old shadcn approach:

lib/utils.ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

This is why Kanpeki doesn't need class-variance-authority or clsx.

Tailwind CSS Motion

Instead of tw-animate-css, we use tailwindcss-motion for animations. It provides:

  • More animation presets out of the box
  • Better customization options
  • More flexible animation controls
  • Modern animation utilities

Open Source

This project is open source and built in public. We welcome contributions, feedback, and improvements.

Inspirations

Here are some cool projects that inspired Kanpeki:

Installation