Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CRUD blocks

Pro

Log Viewer Pinned Notes CRUD Block for Vue

A thirty-line log with counted level chips where any line can be pinned with a note in a popover, a Pinned notes list beside it with in-place editing and a jump to the line, and Unpin with Undo.

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

Let a team annotate a log instead of pasting lines into chat, with this log viewer for Vue with Ark UI. Thirty lines (time, level word and glyph, message in mono) sit in a held, scrolling frame under level chips that count and filter them (Toggle Group). Pin on any line opens a Popover with a Textarea note; saving pins the line, tints it and lists the note at the end under Pinned notes. A note edits where it sits (Editable), its Line button scrolls the log to that line (turning the level back on if a chip hid it), and Unpin leaves "Unpinned line 14." with Undo. Pin line is the one Shine Button. The log follows the theme; it is not a terminal. For incident reviews, support hand-offs and any list worth annotating.

FAQ

How do I show my own log?

Edit SAMPLE: one string per line, time|level|message, with the levels debug, info, warn and error. Line numbers, the chip counts and "26 of 30 lines" are derived. Notes are { line, text } objects in START_NOTES.

How does pinning work?

Pin opens a popover with a note field. An empty note, or one over 120 characters, is refused with its reason under the field. Saving pins the line, tints it and adds the note to the list sorted by line. On a pinned line the same button edits the note and offers Unpin line.

What does the Line button do?

It scrolls the log region, never the page, so the line sits near the top, and gives that line focus. If a level chip had hidden it, the level is switched back on first and the polite line says so.

What can I undo?

The last change to the notes: a pin, a note edit or an unpin. Undo restores the list and puts focus back on the line's pin or the note's button.

What stays local, and how do I wire a real log?

The lines are a typed sample and the notes live in state in this tab; a reload brings the two starting notes back. In your app stream lines from your log service, store a note by line id and author, and keep the length limit on the server.

How does it look on a phone?

The notes list moves under the log, each with its Line, Unpin and note controls, and both regions scroll inside fixed frames. A line's time and level share a row above its message so long messages wrap rather than truncate.

All 100 crud blocks