fellipeutaka/leon
Use Kanpeki component library in React projects.
npx skills add fellipeutaka/leon --skill kanpeki
Related neighbors and high-traction skills in the same topics — useful to compare before installing.
Other skills from fellipeutaka/leon · top by installs.
npx skills add fellipeutaka/leon
Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.
main
Files included with this skill beyond the listing page.
SKILL.md
5,966 B
SUMMARY.md
424 B
Kanpeki is a copy-paste component library for React. Components are copied into your project (not installed as npm packages) via the shadcn CLI. Built on React Aria Components (accessibility), CVA beta (variants), and Tailwind CSS 4.1 (styling).
Docs: https://kanpeki.vercel.app
Install dependencies, create ~/lib/cva.ts, configure globals.css, then add components:
npx shadcn@latest add @kanpeki/buttonComponents are copied to ~/components/ui/<name>/. You own the code.
See [references/installation-setup.md](references/installation-setup.md) for full setup (deps, CVA config, globals.css, dark mode, path alias).
Each component has: index.ts (exports), <name>.tsx (implementation), styles.ts (CVA variants).
import { Button } from "~/components/ui/button"import { Dialog } from "~/components/ui/dialog" → Dialog.Root, Dialog.Content, etc.Multi-part components: Accordion, Breadcrumb, ButtonGroup, Calendar, Card, Carousel, Chart, Combobox, DateField, DatePicker, Dialog, Drawer, Field, InputGroup, ListBox, Menu, NumberField, Pagination, Popover, RadioGroup, Resizable, ScrollArea, SearchField, Select, Sheet, Sidebar, Slider, Table, Tabs, Toast, ToggleGroup, Tooltip.
Key rule: Always use composeRenderProps from react-aria-components on React Aria primitives — required for state selectors (pressed:, selected:, etc.). For plain HTML elements, call CVA directly.
See [references/component-patterns.md](references/component-patterns.md) for full examples (Button, Dialog, namespace pattern, customization).
3-layer architecture: Form > Field > Input component.
Field.Root's render prop connects to a React Aria form primitive (TextField, Select, NumberField, etc.) for automatic label association and validation.
- React Hook Form? → See [references/form-react-hook-form.md](references/form-react-hook-form.md) - TanStack Form? → See [references/form-tanstack-form.md](references/form-tanstack-form.md) - Native HTML validation only? → Use React Aria <Form> + isRequired on primitives
All libraries use the same Field.Root render={<Primitive>} pattern. Field.Error accepts an errors prop — undefined entries are silently ignored.
See [references/form-system.md](references/form-system.md) for Field/InputGroup/ButtonGroup API details.
styles.ts. Import cva from ~/lib/cva (not cva directly).cn() — class merging utility from ~/lib/cva. Wraps twMerge.globals.css via @theme inline. Use light-dark() for automatic dark mode.next-themes (class strategy) + CSS light-dark(). Components auto-switch.pressed:, selected:, disabled:, entering:, exiting:, focus-visible:.tailwindcss-motion plugin: motion-opacity-in, motion-scale-in-95, motion-duration-200.Override styles by passing className (twMerge resolves conflicts) or editing styles.ts directly.
See [references/styling-and-theming.md](references/styling-and-theming.md) for full token reference and CVA deep dive.
| Pitfall | Fix |
|---|---|
Using className={Styles(...)} on React Aria components |
Use composeRenderProps — required for state selectors |
Missing "use client" directive |
All interactive components need it (React Aria is client-only) |
Importing cva from "cva" |
Import from ~/lib/cva — includes twMerge hook |
Old shadcn deps installed (class-variance-authority, clsx) |
Remove them, use cva@beta + tailwind-merge |
Using active: for press state |
Use pressed: — React Aria prefix |
Using @/ path alias |
Kanpeki uses ~/ |
Install any component: npx shadcn@latest add @kanpeki/<name>
Layout & Structure: card, separator, aspect-ratio, resizable, scroll-area, sidebar, collapsible, carousel
Form Inputs: input, textarea, text-field, number-field, search-field, checkbox, radio-group, select, combobox, autocomplete, switch, slider, date-field, date-picker, calendar, input-otp, dropzone, field, form, input-group
Buttons & Actions: button, button-group, link, link-button, toggle, toggle-group
Overlays: dialog, drawer, sheet, popover, tooltip, menu
Data Display: table, list-box, accordion, tabs, avatar, badge, keyboard, chart
Feedback: alert, toast, progress, spinner, skeleton
Navigation: breadcrumb, pagination
Utilities: label