Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Document Library CRUD Block for Vue

A clinic's policy documents with a review date that comes due, worked out from the last review and a fixed day, with a search, a folder filter, a Due for review toggle, Mark reviewed, Retire with Restore and a dialog that adds a document.

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 policies from going stale, with this document library for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a toolbar with a search Input, a folder Native Select and a Due for review button that shows how many documents are due, then one frame of fixed height that scrolls inside itself. Each document has an owner's initials, a folder, a review interval of 6, 12 or 24 months and a line that says when the next review falls: "Review due in 12 days" or "Overdue by 20 days", worked out from the last review and a fixed day, 14 October 2026, never from the clock. Mark reviewed sets the last review to that day and moves the date out; Retire takes the document into a Retired band at the end of the frame, where Restore brings it back and clears the filters so it can be seen. "New document", an outline Button in the header, opens a Dialog with a title, a folder and an interval; Create document is the only Shine Button. Every change leaves an Undo in the foot, a filter that matches nothing shows an Empty state, and the bands are ruled by Guides. For clinics, schools, compliance teams and any library whose records expire.

FAQ

How do I fill it with my documents?

Edit DOCS. Each has an id, a title, a folder, an owner (initials), an interval in months, the ISO date of its reviewed day and a retired flag. The due date, the wording, the counts and the Due for review number are all derived from those fields. Keep review days at 28 or below so adding months never overflows a month.

Where does the date for today come from?

From the constant AS_OF, 14 October 2026, so the sentences read the same on the server and in every visitor's time zone. In your app replace it with the current date; the arithmetic is whole days from ISO strings and adds the interval in months.

What counts as due for review?

A document whose next review is within 30 days, or already past. The toggle shows only those and says how many; pressing it again shows every document. Overdue rows are marked with an alert glyph and a heavier word, not a colour, so they read in any theme.

What is the difference between Retire and delete?

Retire keeps the document: it leaves the list and appears under Retired, with Restore, and the block never deletes anything. Restore puts it back at its place in the list. Both are undoable from the foot.

What does Undo restore?

The last review, retirement or restoration. The block stores the library as it was, Undo puts it back and focuses the list. Creating a document replaces that Undo, and nothing times out.

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

The documents live in React state in this tab and a reload brings the original ten back; no file is stored. In your app call your API in create, review, retire and restore, and send the reviewer's name with each review.