Run the FormKit CLI

At your terminal, run npx formkit@latest create-app to start your new project:

npx formkit@latest create-app

create-app will ask you some questions about your project so it can determine what it needs to install and setup for you:

✔ Please enter a name for the project › <your-project-name>
✔ What framework would you like to use? › Vite / Nuxt
✔ What language should be used? › TypeScript / Javascript
✔ Would you like to install FormKit Pro? › no / yes

Once this is completed, you can follow the instructions to install all dependencies and start a development server:

Created formkit-app!

To run your new app:
📁 cd <your-project-name>
✅ npm install
🚀 npm run dev

formkit.config.ts

import { fr } from '@formkit/i18n'
import { defaultConfig } from '@formkit/vue'

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

app.ts (or equivalent)

// ...
import config from 'formkit.config.ts'

app.use(plugin, defaultConfig(config))

Theming

Using the Web UI

The easiest way to get started with FormKit Tailwind Themes is to install the themes package and head to themes.formkit.com, customize a theme, and choose Download theme.

FormKit Themes

Versatile, configurable, MIT-licensed Tailwind themes for use in your projects. Spend less time styling — more time building.

Using the CLI

Alternatively, you can use the FormKit CLI to select a theme for your project. Run the following command in the same directory as your formkit.config.{ts|js} file:

npx formkit@latest theme

This command will create a formkit.theme.{ts|js} file in the root of your project. To complete the setup you will need use the rootClasses from this theme file in your formkit.config.{ts|js}:

// formkit.config.ts
import { defineFormKitConfig } from '@formkit/vue'
import { rootClasses } from './formkit.theme'

export default defineFormKitConfig({
  config: {
    rootClasses,
  },
})

Finally, you'll need to add the formkit.theme.{ts|js} file to your CSS using a @source directive. This ensures Tailwind scans the theme file for class names to include in your CSS:

/* main.css (or your primary CSS file) */
@import "tailwindcss";
@source "./formkit.theme.ts";
@source "./formkit.config.ts";

Tailwind CSS 3

If you're using Tailwind CSS 3, add the theme file to your tailwind.config.js content array instead:

// tailwind.config.js
module.exports = {
  content: [
    "./app.vue",
    "./formkit.theme.ts"
  ]
}

If you run the command again, you will be taken to https://themes.formkit.com where you can customize your chosen theme.

# with existing formkit.theme file in your project root
> npx formkit@latest theme
? Found local theme file for <themeName>, edit this theme? › (Y/n)

Adding icons

By default, the icons required by FormKit will be loaded from CDN when requested. If you prefer to include the icons directly in your bundle for increased perfomance, to avoid any pop-in, or to alleviate possible SSR issues, then import the genesisIcons set from @formkit/icons and spread them into the icons property of your FormKit config:

npm install @formkit/icons

import { genesisIcons } from '@formkit/icons'
...
const config = defaultConfig({
  plugins: [proPlugin],
  icons: {
    ...genesisIcons
  }
})
...

Further customization

Once you have a theme in your project, you can customize it further by following the documentation provided in the styling section of the FormKit docs.

Adding Pro Inputs

Installing FormKit Pro is easy! Here are the steps:

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

Next, install the @formkit/pro:

npm install @formkit/pro

3. Configure your project

Import the createProPlugin helper and any desired Pro Inputs from @formkit/pro:

// main.js or formkit.config.ts
import { createProPlugin, rating, toggle } from '@formkit/pro'

// Create the Pro plugin with your `Project Key` and desired Pro Inputs:
const proPlugin = createProPlugin('fk-00000000000', {
  rating,
  toggle,
  // any other Pro Inputs
})

// add the plugin to your FormKit config:
const config = defaultConfig({
  plugins: [proPlugin],
})