React

Start by creating a React app with your preferred tooling. A Vite starter is a good default:

# TypeScript
npm create vite@latest my-app -- --template react-ts

# JavaScript
npm create vite@latest my-app -- --template react

cd my-app
npm install

Then install FormKit:

npm install @formkit/react @formkit/core @formkit/inputs

Once those packages are installed, wire FormKit into your app with a FormKitProvider:

import { FormKit, FormKitProvider, defaultConfig } from '@formkit/react'

export default function App() {
  return (
    <FormKitProvider config={defaultConfig()}>
      <FormKit type="text" name="email" label="Email" />
    </FormKitProvider>
  )
}

Configuration

To configure FormKit in React, create a formkit.config.ts file in your project root and export it with defineFormKitConfig():

formkit.config.ts

import { fr } from '@formkit/i18n'
import { defineFormKitConfig } from '@formkit/react'

export default defineFormKitConfig({
  locales: { fr },
  locale: 'fr',
})

App.tsx (or equivalent)

import { FormKit, FormKitProvider, defaultConfig } from '@formkit/react'
import formkitConfig from './formkit.config'

export default function App() {
  return (
    <FormKitProvider config={defaultConfig(formkitConfig())}>
      <FormKit type="text" name="email" label="Email" />
    </FormKitProvider>
  )
}

Theming

For a Tailwind-powered setup, install the FormKit theme and icon packages:

npm install @formkit/themes @formkit/icons

Then generate a starter FormKit theme file:

npx formkit@latest theme

This creates formkit.theme.ts. Use the exported rootClasses in your React FormKit config:

import { defineFormKitConfig } from '@formkit/react'
import { genesisIcons } from '@formkit/icons'
import { rootClasses } from './formkit.theme'

export default defineFormKitConfig({
  icons: {
    ...genesisIcons,
  },
  config: {
    rootClasses,
  },
})

Finally, make sure Tailwind scans both your FormKit theme file and config file:

@import "tailwindcss";
@source "./formkit.theme.ts";
@source "./formkit.config.ts";

If you're using Tailwind CSS 3, add those files to the content array in tailwind.config.js instead.

Adding Pro Inputs

Installing FormKit Pro in React follows the same plugin model as the rest of the React package.

1. Get a Project Key

Login to your FormKit Pro account at pro.formkit.com and create a project. A Project Key will be provided to you.

2. Install the package

npm install @formkit/pro

3. Add the Pro plugin to your config

import { defineFormKitConfig } from '@formkit/react'
import { createProPlugin, rating, toggle } from '@formkit/pro'

const proPlugin = createProPlugin('fk-00000000000', {
  rating,
  toggle,
})

export default defineFormKitConfig({
  plugins: [proPlugin],
})