Staaarter

Breaks and Networking Schedule

Schedule cards specifically for non-session slots: coffee breaks, lunch, and social/networking events, each with a time range, a location, and a short activity-highlight description (e.g. 'Sponsored by Acme, coffee bar in the main atrium'). Perfect for showing networking opportunities alongside the main agenda.

By Staaarter Team
Event
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/breaks-and-networking-schedule.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/event/event20.tsx instead.

Usage

The file also exports event20Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Event20, event20Demo } from "@/components/blocks/event/event20";

export default function Page() {
  return <Event20 {...event20Demo} />;
}

Props

PropTypeDefaultDescription
headingstring"Breaks & networking"Section heading.
descriptionstringundefinedSupporting paragraph under the heading.
itemsEvent20Item[]noneList of break/networking schedule cards to render.
classNamestringnoneExtra classes for the outer section element.

Types

interface Event20Item {
  title: string;
  timeRange: string;
  location: string;
  highlight: string;
  icon: LucideIcon;
}

Behavior notes

  • Each item's icon is a plain lucide-react component reference passed in as data (this block is a Server Component, so passing an icon as a prop is safe here, unlike a 'use client' block).
  • Times, locations, and sponsor mentions are static demo copy, not pulled from any live schedule feed.