Collections

Collections are ordered lists of typed objects. Use them for team members, testimonials, FAQs, service offerings, or any repeating content.

Defining a collection

vard.define({
  team: v.collection({
    name: v.string(),
    role: v.string(),
    photo: v.image(),
    bio: v.richtext(),
  }),
});

The value of content.team is an array:

content.team
// Array<{ name: string; role: string; photo: string; bio: string }>

What clients can do

In the dashboard, collection fields show a list of items. Clients can:

• Add a new item (fills in with empty/default values)
• Edit each field within an item
• Reorder items by dragging
• Delete items

Field types in collections

Collections support all scalar field types: v.string(), v.richtext(), v.image(), v.boolean(), v.color().

Nested collections are not currently supported.

Default values

Collections default to an empty array [] if no client values are set. You cannot specify default items in the schema — defaults are empty.

Accessing collection items

import { vard } from "@/lib/vard";
 
export default async function TeamPage() {
  const { team } = await vard.get();
 
  return (
    <ul>
      {team.map((member, i) => (
        <li key={i}>
          <img src={member.photo} alt={member.name} />
          <span>{member.name}</span>
        </li>
      ))}
    </ul>
  );
}

Note: Always use await vard.get() in page components to ensure live values are loaded. Using vard.define() without first calling prefetchVardValues(vard) in your layout will return empty arrays for collections.