Community Sessions shadcn/tailwind block

About this block

Community SessionsPRO

An upcoming sessions list with a date block, format, and remaining seats on each linked hairline row, beside a column that sticks and floats a live card for whoever is hosting next.

Social52: Community Sessions

An upcoming sessions list with a date block, format and remaining seats on each linked hairline row, beside a column that sticks and floats a live card for whoever is hosting next.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

Upgrade Now

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

bash

npx shadcn add "https://ui.beste.co/r/social52?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

bash

npx shadcn add "https://ui.beste.co/r-base/social52?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/social52.tsx, the card31 person piece it floats on the tile (installed to components/beste/piece/card31.tsx), and the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

The installed file exports social52Demo alongside the block: the exact props behind the preview above. Spread it to get a working list in one line.

tsx

import { Social52, social52Demo } from "@/components/beste/block/social52";

export default function SessionsPage() {
  return <Social52 {...social52Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

tsx

import { Card31 } from "@/components/beste/piece/card31";
import { Social52 } from "@/components/beste/block/social52";

export default function SessionsPage() {
  return (
    <Social52
      badge={{ label: "Coming up" }}
      heading="Open sessions anyone can sit in on"
      description="No registration wall and no recording gate."
      events={[
        {
          month: "May",
          day: "22",
          title: "Office hours",
          description: "An open call with two engineers and no agenda.",
          format: "Online, 45 minutes",
          seats: "12 of 40 seats left",
          href: "/sessions/office-hours",
        },
        {
          month: "Jun",
          day: "19",
          title: "Multi-site roundtable",
          description: "For managers running four or more sites.",
          format: "Bristol, 2 hours",
          seats: "3 of 12 seats left",
          href: "/sessions/roundtable",
        },
      ]}
      hostTitle="Hosted by someone who builds it"
      hostBody="Sessions are run by engineers rather than by a community manager."
      media={
        <Card31
          avatar={{ src: "/people/priya.jpg", alt: "Portrait of Priya Nandan" }}
          name="Priya Nandan"
          role="Hosting the next session"
          status="22 May, 14:00 UK"
          availability="soon"
          rows={[{ label: "Format", value: "Open call, 45 min" }]}
        />
      }
      image={{ src: "/backdrops/green.jpg", alt: "Deep green gradient backdrop" }}
      button={{ label: "See every session", href: "/sessions" }}
    />
  );
}

Props

Prop	Type	Default	Description
`badge`	`{ label: string }`	–	Eyebrow above the hairline rule, rendered through `Badge23`
`heading`	`string`	–	Section heading in the left column of the header
`description`	`string`	–	Supporting paragraph, right-aligned from `md` up
`events`	`CommunityEvent[]`	`[]`	Upcoming sessions as linked rows
`hostTitle`	`string`	–	Heading under the host card
`hostBody`	`string`	–	Paragraph under that heading
`media`	`ReactNode`	–	Live asset on the sticky tile, `card31` in the demo
`image`	`{ src: string; alt: string }`	–	Backdrop behind the media tile
`button`	`{ label: string; href: string }`	–	Outline action under the list
`className`	`string`	–	Extra classes for the outer `section`

type ActionLink = {
  label: string;
  href: string;
};

type TileImage = {
  src: string;
  alt: string;
};

type CommunityEvent = {
  month: string;
  day: string;
  title: string;
  description: string;
  format: string;
  seats: string;
  href: string;
};

Behavior notes

month and day are separate strings rather than a parsed date, which is what lets the block render the calendar block without any date library and keeps server and client output identical.
The day uses tabular-nums inside a fixed size-14 tile, so the blocks stay the same size whatever the digits.
format and seats are joined into one line with a middle dot, so both are required on every event. seats is free text, carrying either a count or the words "Seats available".
Rows are whole Link elements, stacking on mobile and switching to a row with the date tile beside the copy from sm.
The sm:px-4 on rows means the hover fill extends past the text only once the row is horizontal.
The host column is lg:sticky lg:top-24 lg:self-start. The self-start is required, otherwise the column stretches to the row height and sticky has nothing to travel within.
The host card and the first event are separate values, so keeping the card in step with the next session in the list is authoring work.
Rows carry border-t with no closing rule, so the list flows into the action beneath it.

More Social blocks

View all Social

FREE

social48

Community Channels

PRO

social8

Event Cards

PRO

social7

Open sessions anyone can sit in on

Office hours

Migration clinic

Multi-site roundtable

What we are building next

Hosted by someone who builds it