Changelog

Dropzone Component

Added documentation for the Dropzone component, an area into which files can be dragged and dropped.

Features

• Drag-and-drop file uploads
• Customizable drop operation handling
• Disabled state support
• Composable with <Dropzone.Provider>, <Dropzone.Root>, and <Dropzone.Label>
• Built on React Aria <DropZone> component

With File Trigger

Combine drag-and-drop with a clickable file trigger button.

Clickable

Make the entire drop zone clickable to open the file picker.

Pagination Component

Added documentation for the Pagination component, which provides page navigation with numbered links, previous/next controls, and ellipsis indicators.

Features

• Numbered page links with active state
• Previous and next navigation controls
• Ellipsis indicator for collapsed page ranges
• Accessible markup with aria-label and aria-current="page"
• Built on React Aria <Link> component
• Responsive — text labels hidden on small screens

Simple

Page number links only, without previous and next navigation.

Icons Only

Compact navigation using icon-only previous and next controls.

Resizable Component

Added documentation for the Resizable component, which provides accessible resizable panel groups and layouts with keyboard support.

Features

• Horizontal and vertical layouts
• Nested panel groups
• Visible drag handle with withHandle prop
• Keyboard navigation support
• Collapsible panels

Vertical Orientation

With Handle

We're excited to announce the initial release of Kanpeki, a component library featuring accessible and customizable React components built with React Aria Components and Tailwind CSS.

Components

This release includes 50+ components ready to copy and paste into your projects:

Layout & Structure

• Accordion
• Aspect Ratio
• Card
• Carousel
• Collapsible
• Resizable
• Scroll Area
• Separator
• Sidebar
• Table
• Tabs

Forms & Inputs

• Autocomplete
• Button
• Button Group
• Calendar
• Checkbox
• Date Field
• Field
• Form
• Input
• Input Group
• Input OTP
• Label
• List Box
• Radio Group
• Select
• Slider
• Switch
• Text Field
• Textarea
• Toggle
• Toggle Group

Feedback & Overlays

• Alert
• Dialog
• Menu
• Popover
• Skeleton
• Spinner
• Toast
• Tooltip

Navigation & Display

• Avatar
• Badge
• Breadcrumb

Key Features

• Accessibility First - Built on React Aria Components for WCAG compliance
• Tailwind CSS 4 - Modern utility-first styling
• CVA Variants - Type-safe component variants with Class Variance Authority
• Copy & Paste - No npm install required, just copy the components you need
• Customizable - Full control over styling and behavior

Getting Started

Visit the installation guide to add components to your project.