Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Starred Messages Chat Block for Ark UI

A messenger thread with a star on every message and an All and Starred switch that filters the log to starred messages, each followed by a count of the messages in between and a Show in context button that jumps back to it.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Keep the messages you want to find again with this starred messages chat for React with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Starlit, a messenger: the top bar names Bruno, who is helping you plan a move, and holds an All and Starred switch with a derived count, a Toggle Group. Every Message has a star Toggle that appears on hover, on focus and on touch; pressed it is a filled glyph and the word "Starred", never yellow. The window opens on Starred, filtering the log in place to the starred messages, each followed by a quiet "2 messages in between" line that stands for what is hidden and a "Show in context" button that returns to All, scrolls to the message and rings it. With nothing starred an Empty fills the same region. The composer's Shine Button, the only colored control, sends, and the frame is ruled by Guides. It's for a messenger or support inbox where a few messages matter more than the rest.

FAQ

What stays in the page, and how do I make it real?

Everything. The stars are a list of message ids in the page's state, the thread and the sample replies are typed, and nothing is sent. To wire it for real, save and remove a star per user from the star function and load the starred ids with the thread; the filter, the counts and the gap lines are derived from the two lists.

How does the Starred filter work?

Entering Starred takes a snapshot of the starred ids and shows those messages in thread order. Unstarring one inside the view leaves it in place with an empty star until you leave, so the list never jumps under your hand; the count in the switch updates at once. Leaving and coming back shows only what is starred now.

What does Show in context do?

It switches to All, scrolls the log so the message is near the top, and draws a ring around it, using the region's own scroll position so the page never moves. The status line says "Showing the message in context." The ring goes when you switch views or send.

What are the lines between starred messages?

A count of the messages that the filter hides between one starred message and the next, such as "2 messages in between", and for the last one how many come after it. They are derived from the thread, so a new message from Bruno changes the last line.

Is it usable with a keyboard and a screen reader?

Each star is a real button with a name that includes the sender and the time, and it reports pressed or not. The word Starred under a starred message says the same in text. The log is a focusable region announced as a log, and the switch is a labelled group.

How does it look on a phone?

The stars are always visible instead of on hover, the avatar leaves the top bar to make room for the switch, and the gap lines and Show in context buttons keep to the column. The window keeps its height and only the log scrolls.