Build accessible UIs, without compromise.

Beautifully designed, accessible, and composable components built on React Aria. Copy, paste, and own the code — no package to install, no lock-in.

Get Started GitHub

Live components

Try them right here

Team

3 members

Sarah Chen
Design Lead
Online
Marcus Rivera
Frontend Eng.
Online
Aisha Kamara
Product Manager
Away

Notifications

Manage how you're alerted

Push notifications
Alerts on your device
Email digest
Weekly summary
Desktop sounds
Audio cues on activity

Uploads

3 files · 2 in progress

design-system.fig
4.2 MB
quarterly-report.pdf72%
1.8 MB
components-v2.zip38%
12 MB

Messages

#kanpeki-general

SCHey, did you see the new button variants?
MEYeah! The composition API is really clean.
SCAccessibility out of the box too 🎉

Why Kanpeki?

The component library that doesn't get in your way

Kanpeki brings the convenience of shadcn/ui to the accessibility of React Aria — same copy-paste DX, world-class a11y.

React Aria under the hood

Adobe's React Aria handles all the hard a11y work — focus traps, ARIA live regions, pointer event normalization — so you ship compliant UIs without reading 400 pages of spec.

TabShift+TabSpaceEnterEscapeArrow keys

Composition Pattern

Compound components expose named sub-parts. Compose the layout you need, override only what matters.

switch.tsx

<Switch.Root>
  <Switch.Track>
    <Switch.Thumb />
  </Switch.Track>
</Switch.Root>

Minimal Bundle

No monolithic package. Each component is standalone — install exactly what your project needs.

No Runtime Styles

Tailwind utility classes only — zero CSS-in-JS, zero style injection, full purge/treeshaking support.

Familiar API

Same shadcn/ui prop shapes and CVA patterns. Your muscle memory transfers instantly.

Getting Started

One command. Your code.

Use the shadcn CLI to add any Kanpeki component directly into your project. The source lands in your codebase — no package to install, no version to pin.

Works with the official shadcn CLI
Outputs into your existing component folder
TypeScript first — definitions included
Customize freely after adding

Terminal

npx shadcn@latest add https://kanpeki.vercel.app/r/button.json

example.tsx

import { Button } from "~/components/ui/button"

export function Example() {
  return (
    <Button
      onPress={() => console.log("Pressed!")}
    >
      Click me
    </Button>
  )
}

Open source, and proud of it.

Every line of Kanpeki lives on GitHub. Read it, fork it, improve it — or just star it to show support.

Star on GitHub

Browse the Docs