Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

File Upload blocks

Pro

Notification Settings File Upload Block for Vue

A grid of switches, four file events by email, in-app and SMS, with a failure alert locked on, quiet hours for SMS and a preview of the email, in-app or SMS message that a chosen cell would send.

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

Show people the message before they turn it on, with this notification settings panel for Vue with Ark UI. It is the settings page of Calmping, a file service. A grid of Switches puts four events down the side (upload complete, upload failed, storage almost full, shared file opened) and three channels across (email, in-app, SMS). The failure alert is locked on in-app, and the shared-file event is not offered by SMS, shown as a dash that a screen reader announces. Choose an event's name, or change any cell, and the preview band shows the message that cell would send in a Segment Group of the three channels: an email with its sender, subject and line, the in-app one-liner, or an SMS with its length counted against 160 characters. Quiet hours hold SMS overnight, with two Native Selects for the hours and a sentence that says what they amount to. On a phone the grid becomes one card per event with three toggle chips. Save and Discard keep a saved state in this page only. The panel is ruled by Guides. For file services, storage apps and any settings page where the message matters.

FAQ

What decides which message is previewed?

The last cell you changed, or the event whose name you chose, together with the channel in the Show it as group. Changing a switch moves the preview to that cell. The message is typed per event and channel; the SMS text is the event's short line plus a sample link, and its character count is the real length of that text.

What do the locked and missing cells mean?

A locked cell is a switch that is on and cannot be turned off, with a lock beside it and "always on" in its name: a failed upload is always shown in-app so it is never missed. A dash means the event is not offered on that channel, and the preview says so in words.

What do quiet hours do?

They hold SMS from the start hour to the end hour, and the sentence below the selects says how many hours a night that is. When the start and end are the same the sentence says so, Save refuses with a message and focus goes to the end time. The preview of an SMS notes when quiet hours would delay it.

How does the grid work on a phone?

Each event becomes a card with its name and hint and three toggle chips, one per channel, named for the channel and the event. The preview, quiet hours and Save stay as they are.

What stays local, and how do I wire it?

All of it. Nothing is sent, and Save only keeps the draft as the saved state in this page. To wire it, store the preferences per user in your API, send through your email, push and SMS providers, and apply quiet hours in the user's own time zone on the server.

All 100 file upload blocks