ActiveComponent library (general)33
@kanpeki
Component library (general) · MIT · data updated 2026-07-28
Kanpeki is a copy-paste component collection (not an npm package) built on React Aria Components and styled with Tailwind CSS, following the same ethos as shadcn/ui but replacing Radix UI with React Aria for superior accessibility. Ships 50+ components including Accordion, Autocomplete, Calendar, Chart, Combobox, Data Table, Date Picker, Dropzone, Input OTP, List Box, Pagination, Toast, and Toggle Group, plus full form-builder support and dark mode. Beta stage. Use for: projects that require WCAG-compliant, keyboard-navigable components grounded in React Aria rather than Radix, while keeping the shadcn copy-paste ownership model.
accessibilityaestheticanimationauthbuttonscardschartscomponentsdashboardformshooksiconsloadersmediamobilenavigationoverlaystablestheming
Install
npx shadcn@latest add https://kanpeki.vercel.app/r/registry.jsonHealth
StatusActive
Last commit4 months ago
LicenseMIT
Open issues11
ArchivedNo
Stars33
Components (260)
accordionalertaspect-ratioautocompleteavatarbadgebreadcrumbbuttonbutton-groupcalendarcardcarouselchartcheckboxcollapsiblecomboboxdate-fielddate-pickerdialogdrawerdropzonefieldforminputinput-groupinput-otpkeyboardlabellinklink-buttonlist-boxmenunumber-fieldpaginationpopoverprogressradio-groupresizablescroll-areasearch-fieldselectseparatorsheetsidebarskeletonsliderspinnerswitchtabletabstextareatext-fieldtoasttoggletoggle-grouptooltipcvause-is-mobileaccordion-demoalert-demo
Components: accordion, alert, aspect-ratio, autocomplete, avatar, badge, breadcrumb, button, button-group, calendar, card, carousel, chart, checkbox, collapsible, combobox, date-field, date-picker, dialog, drawer, dropzone, field, form, input, input-group, input-otp, keyboard, label, link, link-button, list-box, menu, number-field, pagination, popover, progress, radio-group, resizable, scroll-area, search-field, select, separator, sheet, sidebar, skeleton, slider, spinner, switch, table, tabs, textarea, text-field, toast, toggle, toggle-group, tooltip, cva, use-is-mobile, accordion-demo, alert-demo, alert-destructive-demo, alert-warning-demo, aspect-ratio-demo, aspect-ratio-square, aspect-ratio-portrait, autocomplete-demo, autocomplete-dialog-demo, avatar-demo, avatar-group-demo, badge-demo, badge-destructive-demo, badge-outline-demo, badge-secondary-demo, breadcrumb-collapsed-demo, breadcrumb-custom-separator-demo, breadcrumb-demo, breadcrumb-dropdown-demo, button-demo, button-icon-demo, button-sizes-demo, button-variants-demo, button-group-demo, button-group-orientation-demo, button-group-size-demo, button-group-nested-demo, button-group-separator-demo, button-group-split-demo, button-group-input-demo, button-group-input-group-demo, button-group-dropdown-demo, button-group-select-demo, button-group-popover-demo, calendar-demo, calendar-range-demo, card-demo, carousel-demo, carousel-size-demo, carousel-spacing-demo, carousel-orientation-demo, carousel-api-demo, carousel-plugin-demo, chart-area-demo, chart-bar-demo, chart-demo, chart-line-demo, checkbox-demo, checkbox-disabled-demo, checkbox-group-demo, collapsible-demo, combobox-demo, date-field-demo, date-field-disabled-demo, date-picker-demo, dialog-demo, dialog-scrollable-demo, alert-dialog-demo, drawer-demo, dropzone-demo, dropzone-clickable-demo, dropzone-with-file-trigger-demo, field-checkbox-demo, field-demo, field-fieldset-demo, field-group-demo, field-input-demo, field-radio-demo, field-responsive-demo, field-select-demo, field-switch-demo, field-textarea-demo, tanstack-form-demo, tanstack-form-input-demo, tanstack-form-textarea-demo, tanstack-form-select-demo, tanstack-form-checkbox-demo, tanstack-form-switch-demo, tanstack-form-array-demo, tanstack-form-linked-fields-demo, react-aria-form-demo, react-aria-form-input-demo, react-aria-form-textarea-demo, react-aria-form-select-demo, react-aria-form-checkbox-demo, react-aria-form-switch-demo, react-aria-form-server-validation-demo, react-hook-form-demo, react-hook-form-input-demo, react-hook-form-textarea-demo, react-hook-form-select-demo, react-hook-form-checkbox-demo, react-hook-form-switch-demo, react-hook-form-array-demo, react-hook-form-linked-fields-demo, hover-card-demo, input-demo, input-file-demo, input-disabled-demo, input-with-label-demo, input-with-button-demo, input-group-demo, input-group-icon-demo, input-group-text-demo, input-group-button-demo, input-group-tooltip-demo, input-group-textarea-demo, input-group-spinner-demo, input-group-label-demo, input-group-dropdown-demo, input-group-button-group-demo, input-otp-controlled-demo, input-otp-demo, input-otp-pattern-demo, input-otp-separator-demo, label-demo, link-demo, list-box-demo, menu-checkboxes-demo, menu-demo, menu-radio-group-demo, number-field-demo, pagination-demo, pagination-simple-demo, pagination-icons-only-demo, popover-demo, popover-with-arrow-demo, progress-demo, radio-group-demo, radio-group-disabled-demo, radio-group-with-description-demo, resizable-demo, resizable-vertical-demo, resizable-handle-demo, scroll-area-demo, scroll-area-horizontal-demo, select-demo, select-infinite-scroll-demo, select-scrollable-demo, select-with-label-demo, separator-demo, separator-vertical-demo, sheet-demo, sheet-side-demo, skeleton-card-demo, skeleton-demo, slider-custom-stepping-demo, slider-demo, slider-multiple-demo, slider-vertical-demo, slider-with-label-demo, spinner-color-demo, spinner-demo, spinner-size-demo, switch-demo, switch-group-demo, table-demo, tabs-demo, tabs-disabled-demo, tabs-vertical-demo, textarea-demo, textarea-disabled-demo, textarea-with-label-demo, textarea-with-text-demo, textarea-auto-resize-demo, textfield-demo, textfield-form-demo, textfield-password-demo, textfield-validation-demo, textfield-with-description-demo, textfield-with-icon-demo, toast-custom-demo, toast-demo, toast-promise-demo, toast-status-demo, toast-with-description-demo, toggle-custom-fill-demo, toggle-demo, toggle-disabled-demo, toggle-group-demo, toggle-large-demo, toggle-outline-demo, toggle-small-demo, toggle-group-demo, toggle-group-outline-demo, toggle-group-single-demo, toggle-group-sm-demo, toggle-group-lg-demo, toggle-group-disabled-demo, toggle-group-spacing-demo, tooltip-demo, tooltip-hover-card-demo, tooltip-positions-demo, tooltip-with-arrow-demo, typography-blockquote-demo, typography-demo, typography-h1-demo, typography-h2-demo, typography-h3-demo, typography-h4-demo, typography-p-demo, custom-pluginPreview
Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.