shadcn.io is not affiliated with official shadcn/ui
Video Editor Sidebar Block for Vue
A video editor in a fixed-height window: a media bin of six clips whose Add buttons append blocks to a three-track timeline, with the total length, a Remove last button and a full-track message.
Installation
Overview
Build a timeline from a media bin with this video editor sidebar for Vue with Ark UI. A window framed by a hairline with a plus mark on each corner holds the Sidebar on a muted rail: the clips in three groups (Video, Audio and Titles), each with its length. A clip's name chooses it, and the Add button at the end of its row appends it to the page's timeline of three tracks: the block's width follows the clip's length, it lands on the track of its kind and it starts where that track ends. The Timeline heading shows the total, the longest track, as "0:30", and the top bar's Remove last button takes the newest block off. The page also lists the chosen clip's length, track and how many times it is on the timeline. A track that would pass 1:30 refuses in words. It is built from Sidebar, Button, Avatar and Guides, with a CSS entrance only. Folded to icons the rail keeps the clip icons with tooltips; below the medium breakpoint it is a sheet. For video, audio and slide editors and any tool that builds a sequence from a library.
FAQ
How is the timeline worked out?
From one list. The block keeps the entries you added, in order, and a small function lays them out: each starts where the last block on its track ends and runs for its clip's length. The block's position and width are percentages of 90 seconds, set as CSS variables on each block, in a left-to-right box so time always runs the same way. The total is the longest track, and nothing is typed twice: add or remove an entry and the blocks, the total and the counts all follow.
What happens when a track is full?
The timeline holds 1:30. If an Add would push its track past that, nothing is added and the status line says which track is full and which clip did not fit ("Audio is full at 1:30: Piano bed did not fit."). A clip is never cut short to make it fit.
Why does each row have two controls?
The name and the Add button do different things. Choosing a clip shows its facts on the page without changing the timeline; adding it changes the timeline without needing it chosen first. The Add button is a SidebarMenuAction named for its clip ("Add Harbour wide to the timeline") and it hides when the rail folds to icons. Remove last takes the newest block, whichever clip it was, and is disabled when the timeline is empty.
What stays in the page, and how do I connect it?
Everything: the clips are typed in CLIPS, the timeline is the block's own state and nothing is imported, played or exported. Replace CLIPS with your media bin, and addClip and removeLast with calls to your editor; keep place if your timeline works the same way. The rows are pressed buttons, not links. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button opens from the start edge, the right in a right-to-left layout; the Add buttons work inside it. The timeline and its total are on the page, and the status line says what was added with the new total, so the first screen always shows the result. Escape closes the sheet and focus returns to the menu button.
Is it accessible?
The sidebar is a navigation landmark named after the product, with each group of clips named by its label. Every track is a named list of its blocks, so a screen reader hears "Video track, 1 block" and each block by clip name, and the three kinds are told apart by fill, outline and dash, never by colour. One polite status line reports every addition, removal and refusal, and the lengths and the total are isolated so they read right in a right-to-left layout.