Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Blog blocks

Pro

Ticket Stub Event Blog Block for React

Event announcements as ticket stubs: a date tile, a perforated edge, the title, the place, a seats bar and a Register link.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An events list for React with Base UI, written for Hatchmark Meetups, a print-and-type community. A start-aligned header sits over four stubs in two columns, each framed by its own overshooting lines. A stub has a date tile (the weekday, then the month over the day) at the start, a perforation drawn with a dotted line and two punched notches, then the title, the time and place, a seats bar ("38 of 60 seats") and a Register link. A full evening offers "Join the waitlist" instead. The seats still free are worked out from the typed capacity. On a phone the tile sits on top and the perforation runs across. It's built from Progress, Button and Guides. For meetups, workshops and any blog that announces events. The events are example data and Register goes nowhere.

FAQ

How do I change the events?

Edit EVENTS at the top of the file: title, date (ISO), the weekday, month and day shown on the tile, time, place, taken, capacity and href. A stub is full when taken reaches capacity, and its text and link change on their own.

How is the perforation drawn?

It is a one-pixel box with a repeating gradient for the dots and two small circles, filled with the page background, centred on the stub's frame so they read as punched notches. It runs down on wider screens and across on phones. It is decoration, hidden from assistive technology.

Is the seats bar read out?

The text "38 of 60 seats" is the accessible figure; the bar is a visual copy and hidden from assistive technology. A full event reads "Full, 60 of 60 seats".

Does it work right to left?

Yes. The tile, the perforation and the text mirror, and the times and seat counts are isolated with bdi.

  • Pro

    Agenda Schedule Blog

    Archives by date

    A newsroom's upcoming posts as an agenda grouped by day, with a Select that shows every time in UTC, New York or Tokyo, in place.

  • Pro

    Month Calendar Blog

    Archives by date

    A recipe blog's month as a grid of day buttons, one small square per post on each day, and a panel that lists the posts of the chosen day.

  • Pro

    Week Board Blog

    Archives by date

    A news digest's week as five columns, Monday to Friday, each with a huge day numeral and that day's posts or a quiet 'No post', in a snap scroller on phones.

  • Pro

    Announcement Blog

    Featured story

    A notice board: the lead announcement as a split with a framed card-in-card panel and a Shine Button, and the past announcements as a description list band.

  • Pro

    Month Calendar Events About

    Culture and values

    The standing events of an event hosting company drawn as a month at a glance with no month name: a seven by five table of days with the recurring events marked by shape, and the same events as a dated agenda with a Subscribe link.

  • Pro

    Cards Grid Blog

    Card grids

    The six latest posts of an engineering blog as cards on shared hairlines: drawn greyscale covers, a category, the title as the card's one link, a one-line dek and a byline with the date and reading time.

All 100 blog blocks