FormKit components and helpers built on PrimeVue v4 with Tailwind CSS
npm install buildkit-primevueFormKit-powered form components and helpers built on PrimeVue v4 and Tailwind CSS. Provides a single drop-in
- Vue 3 + PrimeVue v4
- Tailwind CSS 4-ready
- Default import for FormKit: import FormKit from 'buildkit-primevue'
- Utilities for mapping incoming data to fields and extracting a clean payload
- Bundled type definitions — no custom declarations needed
See peerDependencies in package.json for the full list.
Install the package and the required peers:
``bash`
npm i buildkit-primevue primevue @primevue/forms @primevue/themes @primeuix/themes @primeuix/utils vueoptional but recommended if you use Tailwind v4
npm i -D tailwindcss @tailwindcss/vite @tailwindcss/postcss tailwindcss-primeui
Make sure PrimeVue and a theme are set up in your app entry per PrimeVue docs.
You can import FormKit as a default import without curly braces:
`vue
`
`vue
`
`vue
`
If you prefer global registration of components:
`ts
// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { BuildKitPrimeVue } from 'buildkit-primevue';
createApp(App)
.use(BuildKitPrimeVue)
.mount('#app');
`
After this, and related components are globally available.
You can also import specific components via subpaths (with types):
`ts`
import FormKit from 'buildkit-primevue/FormKit';
import FormKitControl from 'buildkit-primevue/FormKitControl';
This package ships its own TypeScript definitions. No need to install @types/buildkit-primevue or add custom module declarations.
Useful types you can import:
- FormKitProps
`ts`
import type { FormKitProps } from 'buildkit-primevue';
Each field accepts a config object. Common properties include:
- label: string
- as: component name (e.g., InputText, InputNumber, Checkbox, RadioButton, Select)
- schema: validation rules string (e.g., "required|max:12|email")
- defaultValue: any
- colSpan: { mobile, tablet, desktop }
- vertical: boolean (layout for group inputs)
- options: for selectables
- showWhen/hideWhen: conditional visibility
Example field configuration:
`ts`
const fields: FormKitProps['fields'] = {
name: {
label: 'Name',
as: 'InputText',
schema: 'required|min:2',
defaultValue: '',
colSpan: { mobile: 12, tablet: 6, desktop: 6 },
vertical: false,
style: {},
},
country: {
label: 'Country',
as: 'Select',
options: [
{ label: 'Japan', value: 'JP' },
{ label: 'Türkiye', value: 'TR' },
],
colSpan: { mobile: 12, tablet: 6, desktop: 6 },
vertical: false,
style: {},
},
};
- setFields(data, fields)
- Maps an incoming object (e.g., from an API) to your field defaults using safe value casting.
-
- Reads PrimeVue objects and returns a clean payload with values cast to sensible types.setDynamicFields(columns)
-
- Transforms a column/config array into a map. Copies rules to schema automatically for non-checkboxes.
Import from the main entry:
`ts`
import { setFields, getPayload, setDynamicFields } from 'buildkit-primevue';
Two helpers are exported for conditional rendering logic:
- equals(left, right) — strict equality with smart casting for arrays and common string-to-boolean/number cases.includesMatch(left, right | right[])
- — substring match for strings or membership for arrays/scalars with casting.
`ts`
import { equals, includesMatch } from 'buildkit-primevue';
- I can’t import FormKit without curly braces.import FormKit from 'buildkit-primevue'
- Ensure you’re using . The default export is the component itself.declare module` needed).
- TypeScript can’t find types.
- Types are bundled. Confirm your tooling resolves package types (no custom
- PrimeVue components aren’t styled.
- Make sure you installed and configured a PrimeVue theme per PrimeVue docs and that Tailwind is set up if you use Tailwind classes.
---
Repository: https://github.com/thekubilay/buildkit-primevue