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.
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.
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
npx shadcn add "https://ui.beste.co/r/social52?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
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.
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.
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:
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" }}
/>
);
}| 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;
};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.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".Link elements, stacking on mobile and switching to a row with the date tile beside the copy from sm.sm:px-4 on rows means the hover fill extends past the text only once the row is horizontal.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.border-t with no closing rule, so the list flows into the action beneath it.social7
Group cards with cover images, member count, privacy indicators, category badges, and join buttons. Perfect for community discovery and group listings.
social8
Event listings with cover images, date/time, location, attendee previews, and RSVP buttons (Going/Interested). Perfect for event discovery and community calendars.
social48
A community section listing four linked places to join as full-width hairline rows, each with an icon tile, a description, a light membership figure, and an arrow that shifts on hover.
social46
Community group card with cover image, privacy status, member/post counts, topic tags, and join button. Perfect for community discovery and group suggestions.