# Utilities
URL: https://docs.forms.saastro.io/docs/utilities
> Component detection, install commands, Tailwind class generation, test data, and field transform utilities.
# Utilities
`@saastro/forms` exports utility functions for component detection, Tailwind CSS class generation, test data generation, and field value transforms. All are tree-shakeable — import only what you need.
---
## Component Utilities
These functions help you determine which UI components a form needs and generate install commands for missing ones.
### getRequiredComponents(config)
Analyzes a `FormConfig` and returns all component names needed to render it.
```tsx
const config = FormBuilder.create('contact')
.addField('name', (f) => f.type('text').label('Name').required())
.addField('email', (f) => f.type('email').label('Email').required().email())
.addField('date', (f) => f.type('date').label('Preferred Date').required())
.addStep('main', ['name', 'email', 'date'])
.build();
const needed = getRequiredComponents(config);
// ['Button', 'Field', 'FieldLabel', 'FieldDescription', 'FieldError',
// 'Input', 'Label', 'FormField', 'FormControl',
// 'Calendar', 'Popover', 'PopoverTrigger', 'PopoverContent']
```
The function always includes **core components** (`Button`, `Field`, `FieldLabel`, `FieldDescription`, `FieldError`) plus any components required by the field types in the config. If a field uses `tooltip`, tooltip components are included automatically.
### getMissingComponents(required, provided)
Compares required components against what's in your registry.
```tsx
// Pass your imported UI components as the registry
const missing = getMissingComponents(needed, {
Input,
Button,
Label,
Field,
FieldLabel,
FieldDescription,
FieldError,
FormField,
FormControl,
});
// ['Calendar', 'Popover', 'PopoverTrigger', 'PopoverContent']
```
### getInstallCommand(missing)
Generates a `npx shadcn@latest add` command for missing components.
```tsx
const cmd = getInstallCommand(missing);
// "npx shadcn@latest add calendar popover"
```
Components are grouped by their shadcn package — `Calendar` maps to `calendar`, `Popover`/`PopoverTrigger`/`PopoverContent` all map to `popover`.
### groupMissingByPackage(missing)
Groups missing component names by their shadcn package name:
```tsx
const grouped = groupMissingByPackage(missing);
// { calendar: ['Calendar'], popover: ['Popover', 'PopoverTrigger', 'PopoverContent'] }
```
### fieldTypeComponents
The raw mapping of field type to required components:
```tsx
fieldTypeComponents['date'];
// ['Calendar', 'Popover', 'PopoverTrigger', 'PopoverContent', 'Button',
// 'FormField', 'FormControl', 'Field', 'FieldLabel', 'FieldDescription', 'FieldError']
fieldTypeComponents['text'];
// ['Input', 'Label', 'FormField', 'FormControl', 'Field', 'FieldLabel', 'FieldDescription', 'FieldError']
fieldTypeComponents['html'];
// [] — no components needed
```
### coreComponents
Components that every form needs regardless of field types:
```tsx
// ['Button', 'Field', 'FieldLabel', 'FieldDescription', 'FieldError']
```
---
## Tailwind Utilities
These functions generate Tailwind CSS classes for the form grid system. The form runtime uses them internally — [`useFormLayout`](/docs/use-form-layout) wraps `getFormGridClass`, and the field renderer applies `getFieldClass` / `getHiddenClasses` — but all are exported for custom implementations. Reach for them when you render fields outside the standard `