---
title: "Theming"
description: "Restyle AutoForm in app.config.ts or per instance with the ui prop."
canonical_url: "https://nuxt-formisch.onmax.me/auto-form/theming"
---
# Theming

> Restyle AutoForm in app.config.ts or per instance with the ui prop.

AutoForm's markup has named slots, each with Tailwind classes, the way Nuxt UI components do. Classes merge with tailwind-merge in this order: the defaults, `app.config.ts`, then the `ui` prop (and `class` on the root).

## Global

```ts [app/app.config.ts]
export default defineAppConfig({
  formisch: {
    autoForm: {
      slots: {
        root: 'space-y-8',
        sectionTitle: 'text-lg',
        arrayItem: 'bg-muted',
      },
    },
  },
})
```

The `formisch` key is typed, so your editor completes the slot names.

## Per instance

```vue
<FAutoForm :schema="schema" :ui="{ grid: 'gap-2', actions: 'justify-end' }" class="max-w-lg" @submit="save" />
```

## Slots

<table>
<thead>
  <tr>
    <th>
      Slot
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Element
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        root
      </code>
    </td>
    
    <td>
      <code>
        space-y-6
      </code>
    </td>
    
    <td>
      The <code>
        <form>
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        section
      </code>
    </td>
    
    <td>
      <code>
        space-y-3
      </code>
    </td>
    
    <td>
      A section and its heading.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        sectionTitle
      </code>
    </td>
    
    <td>
      <code>
        text-base font-semibold text-highlighted
      </code>
    </td>
    
    <td>
      Section heading.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        grid
      </code>
    </td>
    
    <td>
      <code>
        grid gap-4
      </code>
      
      , plus <code>
        sm:grid-cols-*
      </code>
      
       from <code>
        columns
      </code>
    </td>
    
    <td>
      Field grid, also inside objects.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        object
      </code>
    </td>
    
    <td>
      <code>
        col-span-full space-y-3 rounded-lg border border-default p-4
      </code>
    </td>
    
    <td>
      Nested object fieldset.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        objectLegend
      </code>
    </td>
    
    <td>
      <code>
        px-1 text-sm font-medium text-highlighted
      </code>
    </td>
    
    <td>
      Its legend.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        array
      </code>
    </td>
    
    <td>
      <code>
        col-span-full space-y-2
      </code>
    </td>
    
    <td>
      Array wrapper.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        arrayLegend
      </code>
    </td>
    
    <td>
      <code>
        text-sm font-medium text-highlighted
      </code>
    </td>
    
    <td>
      Array label.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        arrayItem
      </code>
    </td>
    
    <td>
      <code>
        flex items-start gap-2 rounded-md bg-elevated/50 p-2
      </code>
    </td>
    
    <td>
      One row.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        arrayItemFields
      </code>
    </td>
    
    <td>
      <code>
        grid flex-1 gap-3
      </code>
      
      , plus columns
    </td>
    
    <td>
      The fields in a row.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        arrayRemove
      </code>
    </td>
    
    <td>
      <code>
        shrink-0
      </code>
    </td>
    
    <td>
      Remove button.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        arrayAdd
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Add button.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        input
      </code>
    </td>
    
    <td>
      <code>
        w-full
      </code>
    </td>
    
    <td>
      <code>
        UInput
      </code>
      
      , <code>
        USelect
      </code>
      
       and <code>
        UTextarea
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        json
      </code>
    </td>
    
    <td>
      <code>
        w-full font-mono text-xs
      </code>
    </td>
    
    <td>
      JSON textarea.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        unit
      </code>
    </td>
    
    <td>
      <code>
        text-sm text-muted
      </code>
    </td>
    
    <td>
      Unit text.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        error
      </code>
    </td>
    
    <td>
      <code>
        text-sm text-error
      </code>
    </td>
    
    <td>
      Form and array errors.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        actions
      </code>
    </td>
    
    <td>
      <code>
        flex gap-2
      </code>
    </td>
    
    <td>
      The actions area.
    </td>
  </tr>
</tbody>
</table>

Inputs are Nuxt UI components, so `ui.input`, `ui.select`, `ui.switch` and `ui.formField` in `app.config.ts` restyle them as everywhere else in your app.

## Component detection

If you turn on Nuxt UI's `experimental.componentDetection`, Nuxt UI only generates CSS for the components it finds in your code, and misses the ones AutoForm renders. Add the module to Tailwind's sources:

```css [app/assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui";

@source "../../../node_modules/nuxt-formisch/dist/runtime";
```

The path is relative to the CSS file.


## Sitemap

See the full [sitemap](https://nuxt-formisch.onmax.me/sitemap.md) for all pages.