Reminders list

The next events with the caller's reminders on each, to add a reminder at an offset before an event or remove one. It loads its data on the server through the block's client.

The reminders block

Build it with AI

Paste this into your coding agent. It builds the web version.

Build "Reminders list" in a React web app that uses shadcn/ui components. The next events with the caller's reminders on each, to add a reminder at an offset before an event or remove one.

It uses the better-supabase `reminders` block (Reminders). It loads its data on the server through the block's client.

Steps:

1. If the app doesn't have the block yet, add the SQL with `npx better-supabase add reminders` and apply the migration.
2. Add the shadcn components the recipe uses: `npx shadcn add card empty skeleton`.
3. The recipe needs no glue: it calls the block's client on the server.
4. Write the component. Load the data on the server with the block's client, starting from the recipe's snippet (`apps/examples/nextjs/src/features/calendar/components/reminders-list.tsx`). Adapt it to the app's existing components, styling and data loading instead of copying it as is.
5. Check the result against the recipe and the block's docs: it typechecks, it reads the same block data, and it handles the loading and empty states the snippet handles.

Read the full code first:

- Recipe: https://bettersupabase.com/recipes/reminders-list.md
- Block docs: https://bettersupabase.com/docs/blocks/reminders

No screenshot yet. Run the Next.js example (pnpm dev:example) to see it.

1
Add the components
terminal
```
npx shadcn add card empty skeleton
```
Install the glue
Install the block with npx better-supabase add reminders. The glue items are copied into your app, so edit them as you need.
None: the page calls the block's client on the server.

Write the component

React and shadcn

View in the example

reminders-list.tsx

/**
 * The next events with the caller's reminders on each. A reminder fires
 * its offset before every occurrence of the event, once per occurrence.
 */
export async function RemindersList() {
  const session = await getSession();

  if (!can(session, "reminders.manage")) {
    return null;
  }

  const [t, format, upcoming] = await Promise.all([
    getExtracted("calendar"),
    getFormatter(),
    settle(loadUpcomingReminders),
    connection(),
  ]);

  if (upcoming.kind === "no-organization") {
    return null;
  }

  const calendars = upcoming.kind === "ok" ? upcoming.data.calendars : [];

  const defaultDate = Temporal.Now.plainDateISO(
    calendars[0]?.tz ?? "UTC",
  ).toString();

  return (
    <Card data-recipe="reminders-list">
      <CardHeader>
        <CardTitle>{t("Upcoming reminders")}</CardTitle>
        <CardDescription>
          {t("Get a notification before the events of the next two weeks.")}
        </CardDescription>
      </CardHeader>
      <CardContent>
        {upcoming.kind === "error" ? (
          <CalendarLoadError title={t("Your reminders didn't load.")} />
        ) : upcoming.data.events.length === 0 ? (
          <Empty className="border">
            <EmptyHeader>
              <EmptyMedia variant="icon">
                <BellIcon />
              </EmptyMedia>
              <EmptyTitle>{t("No events coming up")}</EmptyTitle>
              <EmptyDescription>
                {t("Add an event, then set a reminder for it here.")}
              </EmptyDescription>
            </EmptyHeader>
            {calendars.length > 0 && can(session, "calendar.write") ? (
              <EmptyContent>
                <CreateEventDialog
                  calendars={calendars}
                  defaultDate={defaultDate}
                />
              </EmptyContent>
            ) : null}
          </Empty>
        ) : (
          <ul className="flex flex-col gap-2">
            {upcoming.data.events.map((event) => (
              <EventReminders
                key={event.id}
                eventId={event.id}
                title={event.title}
                when={format.dateTime(
                  new Date(event.startsAt),
                  event.allDay
                    ? { dateStyle: "medium" }
                    : { dateStyle: "medium", timeStyle: "short" },
                )}
                reminders={event.reminders}
              />
            ))}
          </ul>
        )}
      </CardContent>
    </Card>
  );
}

Build "Reminders list" in a React web app that uses shadcn/ui components. The next events with the caller's reminders on each, to add a reminder at an offset before an event or remove one. It uses the better-supabase `reminders` block (Reminders). It loads its data on the server through the block's client. Steps: 1. If the app doesn't have the block yet, add the SQL with `npx better-supabase add reminders` and apply the migration. 2. Add the shadcn components the recipe uses: `npx shadcn add card empty skeleton`. 3. The recipe needs no glue: it calls the block's client on the server. 4. Write the component. Load the data on the server with the block's client, starting from the recipe's snippet (`apps/examples/nextjs/src/features/calendar/components/reminders-list.tsx`). Adapt it to the app's existing components, styling and data loading instead of copying it as is. 5. Check the result against the recipe and the block's docs: it typechecks, it reads the same block data, and it handles the loading and empty states the snippet handles. Read the full code first: - Recipe: https://bettersupabase.com/recipes/reminders-list.md - Block docs: https://bettersupabase.com/docs/blocks/reminders

Write the component

React and shadcn

View in the example

reminders-list.tsx

/**
 * The next events with the caller's reminders on each. A reminder fires
 * its offset before every occurrence of the event, once per occurrence.
 */
export async function RemindersList() {
  const session = await getSession();

  if (!can(session, "reminders.manage")) {
    return null;
  }

  const [t, format, upcoming] = await Promise.all([
    getExtracted("calendar"),
    getFormatter(),
    settle(loadUpcomingReminders),
    connection(),
  ]);

  if (upcoming.kind === "no-organization") {
    return null;
  }

  const calendars = upcoming.kind === "ok" ? upcoming.data.calendars : [];

  const defaultDate = Temporal.Now.plainDateISO(
    calendars[0]?.tz ?? "UTC",
  ).toString();

  return (
    <Card data-recipe="reminders-list">
      <CardHeader>
        <CardTitle>{t("Upcoming reminders")}</CardTitle>
        <CardDescription>
          {t("Get a notification before the events of the next two weeks.")}
        </CardDescription>
      </CardHeader>
      <CardContent>
        {upcoming.kind === "error" ? (
          <CalendarLoadError title={t("Your reminders didn't load.")} />
        ) : upcoming.data.events.length === 0 ? (
          <Empty className="border">
            <EmptyHeader>
              <EmptyMedia variant="icon">
                <BellIcon />
              </EmptyMedia>
              <EmptyTitle>{t("No events coming up")}</EmptyTitle>
              <EmptyDescription>
                {t("Add an event, then set a reminder for it here.")}
              </EmptyDescription>
            </EmptyHeader>
            {calendars.length > 0 && can(session, "calendar.write") ? (
              <EmptyContent>
                <CreateEventDialog
                  calendars={calendars}
                  defaultDate={defaultDate}
                />
              </EmptyContent>
            ) : null}
          </Empty>
        ) : (
          <ul className="flex flex-col gap-2">
            {upcoming.data.events.map((event) => (
              <EventReminders
                key={event.id}
                eventId={event.id}
                title={event.title}
                when={format.dateTime(
                  new Date(event.startsAt),
                  event.allDay
                    ? { dateStyle: "medium" }
                    : { dateStyle: "medium", timeStyle: "short" },
                )}
                reminders={event.reminders}
              />
            ))}
          </ul>
        )}
      </CardContent>
    </Card>
  );
}

Add the components

Install the glue

Write the component

React and shadcn

Add the components

Install the glue

Write the component

React and shadcn