Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Error blocks

Pro

File Too Large Error Block for React

A full-screen 413 for a clip over the plan limit: a framed staircase of three plan limits with a marker for your file, four compression levels that move it and rewrite the verdict, and a real file picker that reads only name and size.

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

Tell people how much smaller their file has to be, and what that buys them, with this file too large page for React with Base UI. It's the 413 screen of Reelcut, a video trimmer: a whole screen with the page's rails and one band across it, split in two. At the start, framed by Guides, a staircase of the three plan limits (Free 25 MB, Pro 100 MB, Business 1 GB, on a log scale) with a line for your file's size: a step the file fits is solid, one it doesn't is hatched. At the end, four compression levels in a Toggle Group (Original 187 MB, High quality 96 MB, Balanced 54 MB, Small 24 MB) move the line and rewrite the verdict, "Fits on Business" or "Fits on every plan", and how far the file is over the Free limit. The Shine Button Choose a smaller file opens the real file picker. It's built from Toggle Group, Shine Button and Guides, with a CSS entrance only. For any product with a per-file size limit.

FAQ

Does the page read the file I choose?

Only its name and its size, which the browser already knows, and never its contents. The line moves to that size and the verdict is recomputed, and the status line says "Nothing was uploaded." Choosing a level instead puts the group back in charge of the line. Your own upload code, not this page, should send the file anywhere.

Where do the compression sizes come from?

They are typed: the level names and the sizes they would give for this clip. A real page would estimate them from the file's length and your encoder presets, or tell the user the target size and let the trimmer produce it. The verdict is derived from whichever size is on the line and the typed plan limits, so changing a limit changes the sentences and the steps together.

Why is the staircase on a log scale?

Because 25 MB and 1 GB are 40 times apart: on a linear scale the first two steps would be slivers. The scale is logarithmic from 5 MB to the top plan's limit, and the caption says so. The drawing is hidden from screen readers; the verdict and the Free-limit line carry the same facts in text.

Is checking the size in the page enough?

No: it is a convenience. A visitor can bypass a browser check, so enforce the limit on your server and answer an oversized upload with a 413 and the limit, which is what this page explains.

How does Choose a smaller file work?

The button presses a hidden file input that accepts video files, so it opens the browser's own picker, and the same input is read when you choose. A keyboard user gets the button, not the input. Compare plans is a link to #: point it at your pricing page.

How does it look on a phone?

The staircase comes right after the heading, then the four levels in two rows, the verdict and the button, which is pinned to the foot of the screen until you reach it. The caption under the staircase is kept for screen readers only.

  • Pro

    Storage Quota Exceeded Error

    Files and data

    A panel for a vault that is over its storage: one bar on a fixed axis with the trash and a hatched overshoot, a table whose states are worked out from the numbers, and a Shine Button that empties the trash and redraws everything.

  • Pro

    Rate Limit Error

    Blocked and limited

    A full-screen 429 for an API key over its limit: a 10 by 10 grid of the last 60 seconds of requests, the Retry-After header worked out from the oldest, and a demo clock that empties the oldest cells so Retry works.

  • Pro

    Limit Reached Billing

    Upsell and retention

    The upgrade prompt shown where someone hits a plan limit: what was blocked, the limit reached against the next plan's, a two-column comparison and Upgrade or Remind me later.

  • Pro

    Plan Comparison Settings Billing

    Upgrade and downgrade

    Every plan side by side inside app settings: a table with the account's own plan marked and tinted, one change button per plan, a row for when each change takes effect, and plan tabs on a phone.

  • Pro

    Subscription Required Error

    Plans and checkout

    A full-screen 403 for a feature the plan does not include: the facts, what Pro adds, and an editable message that asks the workspace owners, with a Viewing as demo control that turns the ask into an upgrade with the price worked out.

  • Pro

    Download Failed Error

    Files and data

    A full-screen page for a download that stopped: three requirement cells with a free-space shortfall worked out from typed numbers, three mirrors as radio cells with their latencies, and a retry that fills a bounded bar and stops where the disk would fill.

All 100 error blocks