Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

File Upload blocks

Pro

Recent Files File Upload Block for Vue

A recents widget for a document app: the last eight files grouped Today, Yesterday and Earlier, a star that pins a file into a Pinned group, a type filter and Clear recents 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

Put the files people reach for first at the top of the dashboard, with this recent files panel for Vue with Ark UI. It is the recents widget of Latestack, a document app: the last eight files opened or uploaded, grouped Today, Yesterday and Earlier from typed labels, so nothing reads the clock. A star Toggle pins a file into a Pinned group above the days and unpins it again. A Toggle Group filters by type (All, Docs, Images, Sheets) and the count beside it follows. "Clear recents" empties the unpinned files, "Undo" brings them back, and "View all" says the full list is not part of the demo. The list is a held scroll region, so pinning, filtering and clearing never move the panel. The panel is ruled by Guides. It is built from Toggle, Toggle Group, Button and Guides, with a CSS entrance only. For dashboards, home screens and any app with a files shortcut.

FAQ

How do pins work?

Press the star on a row and the file moves into the Pinned group, whatever day it is from; press it again and it returns to its day. The pressed state is spoken by the toggle and a polite status line says "Pinned Q4 roadmap.docx." Focus stays on the star after the row moves.

What does Clear recents do, and what does Undo bring back?

It hides every unpinned file and says how many it cleared; pinned files stay. Undo restores exactly that set. Nothing is deleted from anywhere, because the list is typed data in the page.

Does the filter change the height?

No. The list sits in a scroll region of fixed height, and a filter that matches nothing shows a short sentence in the same box. The count beside the filter and the status line both follow the filter.

Why are the times typed?

So the block looks the same on every visit and in every screenshot. Each file carries a day group and a label such as "9:40 am" or "Fri 16 Oct". In your app, group by comparing each file's timestamp with the start of today and of yesterday on the server's clock.

Can I use it from the keyboard?

Yes. Tab reaches the filter, the scroll region, each star and the buttons below. Arrow keys move between the filter items, and the stars are plain toggles. On a phone the stars and filter items are at least 44 px tall.

What stays local, and how do I wire it?

Pins, the filter and the cleared list live in the tab. To make them real, replace the typed RECENTS with your recents endpoint, save pins to the user's profile when pin runs, and send the cleared ids to the server in clear.

All 100 file upload blocks