custom-form-fields

Reusable React form fields built with shadcn/ui-style primitives.

Install

npm install custom-form-fields

For local testing before publishing:

npm install
npm run build
npm pack

Then install the generated .tgz file in another project.

Tailwind setup

These components use Tailwind utility classes and shadcn/ui color tokens. Add the package output to the consuming app's Tailwind content list:

export default {
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/custom-form-fields/dist/**/*.{js,mjs,cjs}',
  ],
};

The consuming project should already define the usual shadcn/ui CSS variables such as --background, --foreground, --border, --input, --ring, --primary, --primary-foreground, --muted-foreground, and --destructive.

Usage

import {
  FormTextField,
  FormNumberField,
  FormFileField,
  FormSelectField,
  SubmitButton,
  type AppForm,
} from 'custom-form-fields';

type ProjectForm = {
  name: string;
  hours: number | string;
  attachment: File | null;
  status: string;
};

function ProjectFields({ form }: { form: AppForm<ProjectForm> }) {
  return (
    <>
      <FormTextField form={form} name="name" label="Name" required />
      <FormNumberField form={form} name="hours" label="Hours" min={0} />
      <FormFileField
        form={form}
        name="attachment"
        label="Attachment"
        accept="image/*,.pdf"
      />
      <FormSelectField
        form={form}
        name="status"
        label="Status"
        options={[
          { value: 'draft', label: 'Draft' },
          { value: 'active', label: 'Active' },
        ]}
      />
      <SubmitButton processing={form.processing}>Save</SubmitButton>
    </>
  );
}

You can also use the lower-level controlled fields directly:

import { TextField, FileField, SelectField } from 'custom-form-fields';