shadcn.io is not affiliated with official shadcn/ui
Feature Spotlight Changelog Block for Svelte
One release with its headline feature in the spotlight: a drawn greyscale editor with two named cursors beside the title and why it matters, and a band of four smaller changes underneath.
Installation
Overview
A release spotlight for Svelte with Ark UI, written for Spotbeam, a fictional collaborative docs editor. A split on a hairline divider: at the start a drawn greyscale editor in a corner frame (a document with a title bar and a presence stack of three people, a toolbar, a heading, two cursors with named flags and one shaded selection), at the end the release's type tag, version and day, the title as the block's heading, a sentence, a short "Why it matters" list and an outline link to the release notes. Under the split a band, "Also in v3.8", sets four smaller changes in cells on shared hairlines, each with a type tag, a title and a line. The drawing is decoration and hidden from assistive technology, with a caption saying the same in words. On a phone the copy comes first, then the figure, then the cells in one column. It's built from Guides, Avatar, Badge and Button, with your theme's tokens for every colour. The release is example data.
FAQ
How do I change the feature and the extras?
Edit SPOTLIGHT (its kind, version, release, date, title, summary and reasons) and EXTRAS at the top of the file. The band's heading, the cells and the type tags follow. Keep EXTRAS at a multiple of two so the two-column layout has no empty cell, or a multiple of four for the wide one.
Where does a real screenshot go?
Replace EditorDrawing with your own figure, keeping the figure and its figcaption. The drawing is built from shapes, text-colour tints and the catalog's Avatar, so it follows the theme in light and dark; a real image would need two versions to do the same.
What does a screen reader hear?
The type tag, version and day, then the title as the block's heading, the sentence, the "Why it matters" heading and its list, and the link. The drawing is hidden; the figure's caption says what it shows ("Two people editing one paragraph…"). The band is a heading followed by a list of four items, each with its own small heading.
How does it fit on a phone and in a right-to-left layout?
Below lg everything stacks in one column with a hairline between the copy and the figure, and the link goes full width. In a right-to-left layout the split mirrors: the figure moves to the other side of the divider, and the drawing itself stays left-to-right, because a document is read that way.