@vetaui/molecules

Composite UI components built on top of @vetaui/atoms. Molecules combine atoms into higher-level patterns — form wiring, date pickers, search boxes, sortable lists, and more.

Install

pnpm add @vetaui/foundations @vetaui/atoms @vetaui/molecules

Usage

import { FormField } from "@vetaui/molecules";
import { Button } from "@vetaui/atoms";

<FormField
  label="Email"
  required
  description="We'll never share your email."
  error={errors.email?.message}
>
  <Input type="email" {...register("email")} />
</FormField>

Component catalog

Form

| Component | Description | | --- | --- | | FormField | Label + control + description + error — full a11y wiring | | InputGroup | Prefix/suffix addons around an Input | | PasswordInput | Input with show/hide toggle | | OtpInput | Multi-cell one-time password input | | CurrencyInput | Locale-aware formatted money input | | PhoneInput | International phone number with country flag | | TagInput | Multi-value tag editor |

Date / Time

| Component | Description | | --- | --- | | DateRangePicker | Calendar popover for picking a date range | | TimePicker | Hour/minute/AM-PM time picker |

Selection

| Component | Description | | --- | --- | | AsyncSelect | Searchable select with async option loading | | SearchBox | Debounced search input with clear button | | SortableList | Drag-and-drop sortable list via @dnd-kit | | FileDropzone | Drag-and-drop file upload zone |

Data display

| Component | Description | | --- | --- | | Stat | Metric card — label + value + delta | | EmptyState | Zero-state illustration + message | | Pagination | Page navigation with prev/next + page numbers | | Breadcrumb + parts | Accessible breadcrumb trail |

With react-hook-form

Use @vetaui/forms-kit for the full form integration (<Form>, <FormField>, zod resolver, multi-step forms):

pnpm add @vetaui/forms-kit

import { ZodForm, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@vetaui/forms-kit";

<ZodForm schema={schema} onSubmit={handleSubmit}>
  {({ register, formState: { errors } }) => (
    <FormField error={errors.email?.message} label="Email">
      <Input {...register("email")} />
    </FormField>
  )}
</ZodForm>

License

MIT — Dambert Munoz