shadcn.io is not affiliated with official shadcn/ui
Meetups Team Block for Solid
Four community organisers as rows with a twelve-month cadence strip, filled where a meetup ran, plus the next topic, when the group meets, its members and a Remind me toggle.
Installation
Overview
A meetups section for Solid with Ark UI, written for Whitbarrow, a fictional community-events app. A centred header says how many organisers there are and how to read the strips. Under it, four rows run rail to rail and the last ends the block. Each row has the organiser (an initials avatar, a name and their group), a badge with the cadence in words ("Almost every month", "Every quarter" or "7 of 12 months"), and a strip of twelve cells under the name: filled for a month the group met, hollow for a month it didn't, with the month's initial under each. At the end of the row sit the next topic and when the group meets ("Second Thursday"), the member count and a Remind me toggle. Reminders live on the page only: nothing is sent. From lg the row is two columns; on a phone it stacks. It is built from Toggle, Badge, Avatar and Guides with your theme's tokens. The groups, topics and people are made up for the example.
FAQ
How do I change the groups and the strips?
Edit GROUPS at the top of the file. A group has an organiser, a name, a member count, a rhythm (meets), the next topic and held: twelve characters, January first, with x for a month the group met and . for a month it didn't. The cadence badge is worked out from the number of xs, and the strip, its screen-reader text and the labels all come from the same twelve characters.
How is a strip read without seeing it?
The strip is a list of twelve months and each month's item carries text ("March, meetup held" or "March, no meetup"); the filled and hollow cells are hidden from assistive technology, so a screen reader hears the facts, not the drawing. A hollow cell is an outline and a filled one is solid, so the strip reads without colour.
What does Remind me do?
It changes the page and nothing else: the toggle is pressed, its bell becomes a check and a polite status line says how many reminders you set. Nothing is sent and a reload clears it. To make it real, call your own endpoint in the toggle's change handler.
The toggle takes pressed and onPressedChange.
Why does the next meetup say Second Thursday and not a date?
A date would be true once. "Second Thursday" is a rhythm that stays true, and the block never reads the clock. If you do want a date, add it to the group and format it where you render the row.