Installation
Install @letar/forms and its peer dependencies
Install
npm install @letar/forms @tanstack/react-form @chakra-ui/react zod framer-motion
# or with bun
bun add @letar/forms @tanstack/react-form @chakra-ui/react zod framer-motion
# or with pnpm
pnpm add @letar/forms @tanstack/react-form @chakra-ui/react zod framer-motionOptional Dependencies
For drag & drop reordering in array fields:
npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilitiesFor input masking (phone, credit card, etc.):
npm install use-mask-inputPeer Dependencies
| Package | Version | Required |
|---|---|---|
react | >= 18.0.0 | Yes |
@tanstack/react-form | >= 1.0.0 | Yes |
@chakra-ui/react | >= 3.0.0 | Yes |
framer-motion | >= 10.0.0 | Yes |
zod | >= 3.24.0 | Yes |
@dnd-kit/* | >= 6.0.0 | Optional |
use-mask-input | >= 3.0.0 | Optional |
Setup
Ensure your app has Chakra UI's ChakraProvider configured:
import { ChakraProvider, defaultSystem } from '@chakra-ui/react'
function App({ children }) {
return <ChakraProvider value={defaultSystem}>{children}</ChakraProvider>
}That's it! You're ready to use @letar/forms.