shadcn.io is not affiliated with official shadcn/ui
Minimal Notes Chat Block for Ark UI
A bare thread of notes with no top bar, avatars or bubbles, where side and weight say who wrote, every note is a button that shows its time and a word, and a borderless one-row composer sends with an arrow.
Installation
Overview
Show the quietest possible thread, with this minimal notes chat for React with Ark UI. A hairline frame with a plus mark on each corner holds a narrow window of fixed height for Slipnote, a note-passing app: there is no top bar and no avatar, only a hidden heading, and the log starts at the top with six notes from Message rows. Who wrote a note shows by its side (yours at the end) and its weight (yours in full foreground, theirs a step softer, both readable). Every note is a button: pressing, hovering or focusing it shows its time and one word, "Sent", "Seen" or "Received", on a line the note already holds, so nothing moves. The composer is one borderless row under a hairline with the Shine Button, the only colored control, as an arrow, and a Typing Indicator Text shows before a typed reply. The frame is ruled by Guides, and everything moves with CSS only. For a journal, a note-to-self app or any thread that should feel like paper.
FAQ
How do the notes show their time?
Each note is a button with aria-expanded. Its second line (the time and one word) is always in the layout but invisible until you press the note, hover it or focus it, so touch and keyboard users get what hover users get and no line shifts. Two notes are open at load to show the idea.
What stays in the page, and how do I make it real?
Everything. The replies come from a short typed script in this file: a few keyed on words in your message, then one fallback per message and a last line that says it was the last sample reply. Open notes stay open until you press them again. Nothing is sent and no model runs, as the line under the composer says. To wire it for real, send the text where the code says so and append incoming messages to the same list.
What do Sent, Seen and Received mean?
Your note says "Sent" until a note of theirs comes after it, then "Seen". Theirs say "Received". All three are derived from the order of the notes, not typed, and they are words, never colors.