Smart Form

A framework-agnostic form library with type-safe schema validation. Define your form once, use it with React or Vue.

Example

Define your form once:

// forms/contact.ts
import { form } from '@smart-form/core'
import { z } from 'zod'

export const contactForm = form()
  .text('name', { schema: z.string().min(1), label: 'Name' })
  .text('email', { schema: z.string().email(), label: 'Email' })
  .select('priority', {
    schema: z.enum(['low', 'medium', 'high']),
    label: 'Priority',
    options: [
      { value: 'low', label: 'Low' },
      { value: 'medium', label: 'Medium' },
      { value: 'high', label: 'High' },
    ],
  })
  .array('attachments', {
    label: 'Attachments',
    fields: (row) => row
      .text('filename', { schema: z.string(), label: 'Filename' })
      .text('url', { schema: z.string().url(), label: 'URL' }),
  })

Use in React (with Mantine):

import { SmartForm } from '@smart-form/react-mantine'
import { contactForm } from './forms/contact'

function ContactPage() {
  return (
    <SmartForm
      form={contactForm}
      onSubmit={(data) => console.log(data)}
    />
  )
}

Use in Vue (with Vuetify):

<script setup lang="ts">
import { SmartForm } from '@smart-form/vue-vuetify'
import { contactForm } from './forms/contact'
</script>

<template>
  <SmartForm
    :form="contactForm"
    @submit="(data) => console.log(data)"
  />
</template>

Documentation

View Full Documentation (in development)

Installation

# React
npm install @smart-form/react zod

# React + Mantine (includes pre-built components)
npm install @smart-form/react-mantine zod

# Vue 3
npm install @smart-form/vue zod

# Vue 3 + Vuetify (includes pre-built components)
npm install @smart-form/vue-vuetify zod

Packages

Package	Description
@smart-form/core	Framework-agnostic core (form builder, store, types)
@smart-form/react	React bindings
@smart-form/react-mantine	React + Mantine pre-built components
@smart-form/vue	Vue 3 bindings
@smart-form/vue-vuetify	Vue 3 + Vuetify pre-built components

Examples

Example	Description
react-shadcn	React with shadcn/ui components
react-mantine	React with Mantine components
vue-vuetify	Vue 3 with Vuetify components

License

MIT