Grids

VibeFlui uses FluiKitGridConfig for form fields, detail fields, and dashboard cards.

Grid config

grid: {
  columns: {
    base: 1,
    md: 2,
    xl: 3
  },
  gap: "gap-4",
  className: "items-start"
}

Numeric columns

form: {
  grid: {
    columns: 2
  }
}

Numeric column values from 1 to 6 map to Tailwind grid classes. Numeric values larger than 1 become one column on mobile and the requested count at md.

Responsive columns

detail: {
  grid: {
    columns: {
      base: 1,
      sm: 2,
      lg: 4
    }
  }
}

Supported breakpoints:

• base
• sm
• md
• lg
• xl

Supported column counts are 1 through 6.

Defaults

Default grid gap is gap-4.