shadcn.io is not affiliated with official shadcn/ui
Profile Banner File Upload Block for Vue
A creator page's 3-to-1 cover with a Position slider that moves a taller drawing inside the frame, a Desktop or Phone switch that shows the window each one crops to, and the avatar-overlap corner outlined.
Installation
Overview
Choose which part of a cover people will see, with this profile banner upload for Vue with Ark UI. It is the page cover of Stagebill, a profile-page builder for creators. A hairline frame with a plus mark on each corner holds the cover in a 3 to 1 box, drawn taller than the box so it can move. A Slider sets its position and the readout says "center 40%". A Toggle Group switches the preview between Desktop, which shows the whole 3 to 1, and Phone, which shows only the middle 2 to 1, so the sides outside it are dimmed; in both, the corner where your avatar overlaps the cover is outlined and dimmed. Upload cover, the only Shine Button, and a file dropped on the frame use File Upload; Remove empties the frame and disables the slider. The bands are ruled by Guides, with a CSS entrance only. For profile builders, creator pages and any cover that crops differently on a phone.
FAQ
What does the Position slider do?
The drawing is 240% as tall as the frame, so it can travel 140% of the frame's height. The slider is the share of that travel, from the top of the drawing (0) to its bottom (100), and the readout and the status line say it as "center 40%". Dragging only moves the drawing; the status line speaks when you let go. Arrow keys move it by one.
What do Desktop and Phone show?
Desktop is the whole 3 to 1 frame. Phone is the middle 2 to 1, the part a narrow screen keeps; the dimmed bands at both sides are what it crops. The switch keeps one choice at all times, announces the window it shows, and never changes the frame's height.
What is the outlined corner?
Where your avatar sits over the cover on the live page. It is outlined and dimmed so you can keep the cover's subject out of it. Its size and place are fractions of the frame, so change them in the look helper when your layout differs.
What stays local, and how do I wire it up?
All of it. The block never opens a picked file: it lists its name and size and draws a scene chosen from the name, and a new file resets the position to 50%. To wire it, send the file from take, store the position with it as a percentage, and use it as object-position on the live page.