Widths and Theme Slots

Widths and theme slots control the outer layout styling of VibeFlui surfaces.

Width presets

form.width and detail.width use widthClassName.

Width	Class
`sm`	`max-w-sm`
`md`	`max-w-md`
`lg`	`max-w-lg`
`xl`	`max-w-xl`
`2xl`	`max-w-2xl`
`3xl`	`max-w-3xl`
`4xl`	`max-w-4xl`
`5xl`	`max-w-5xl`
`full`	`max-w-full`

Any other string is used as-is.

form: {
  mode: "modal",
  width: "4xl"
}

Surface theme slots

theme: {
  classNames: {
    root: "space-y-4",
    layout: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
    toolbar: "flex flex-wrap gap-2",
    modal: "w-full max-w-4xl rounded-xl bg-white shadow-xl",
    drawer: "w-full max-w-lg bg-white shadow-xl",
    page: "w-full rounded-xl border bg-white p-6"
  }
}

Grid class hooks

form: {
  grid: {
    columns: { base: 1, md: 2 },
    gap: "gap-6",
    className: "items-start"
  }
}

Merge behavior

Class names are resolved through the theme system and cn, so schema class hooks are merged with default runtime classes.