Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Release Tabs Press Bulletin Awards Block for Ark UI

A centred header over tabs for three press releases of a release distributor, each shown on a framed page with dateline, headline, two paragraphs, a boilerplate and a media contact.

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

A press-release bulletin for React with Ark UI. A centred header sits over a tab list with one tab per release (Winner, Finalist, Shortlist, newest first), each with its date, and under it the open release on a framed page with + marks on its corners. A page reads as a release does: "For immediate release" and the date, the headline, a dateline and two paragraphs (the second a quotation), a boilerplate about the company and a media contact in an address element. Every page is stacked unseen under the open one, so the block keeps the height of the longest and switching tabs never moves the page. The page's rails and top rule come from the Guides spine. It's built from Tabs, Guides and your theme's tokens. The distributor, the programme and the people are made up for the example: replace the releases with your own.

FAQ

How do I change the releases?

Edit RELEASES at the top of the file. Each release has a tab label, an ISO date, a city for the dateline, a headline, a body paragraph and a quote paragraph. The company paragraph (BOILERPLATE) and the media contact (CONTACT) are shared by every release, as they are in real life. Add a fourth release and the tab list and the page height follow.

Why doesn't the page jump when I switch tabs?

All the pages are rendered, unseen, in one grid cell under the open one, so the cell is as tall as the longest page. The unseen copies are hidden from assistive technology and can't be focused.

How do I use the tabs with a keyboard?

Tab moves focus to the tab list, the arrow keys move between the tabs, and the open page is the next stop. The tab list scrolls sideways inside its own box on a very narrow screen rather than pushing the page.

Are the contact details real?

No. The address uses the reserved .example domain and a made-up phone number, and the people, the distributor and the Jasperbridge programme are invented. The email is a real mailto link so you can see how it behaves; swap in your press contact. The phone number sits in a bdi set to read in a fixed direction so it keeps its order in a right-to-left layout.

How do screen readers read a release?

Each page is an article. The headline is a third-level heading, the company paragraph and the contact are under fourth-level headings, and the contact is an address. The date is a time element, so its machine-readable value is the ISO date.

How does it fit on a phone?

The page's padding steps down, the boilerplate and the contact stack in one column and the headline drops a size. The frame's corner marks keep a margin inside the rails, and nothing scrolls sideways at 320 pixels.

All 137 awards blocks