shadcn.io is not affiliated with official shadcn/ui
File Tabs Navbar Block for Svelte
An editor navbar for a browser IDE with closable file tabs, a dot on unsaved files, a branch chip with a changed count and a Run button that saves what changed.
Installation
Overview
A file-tabs navbar for Svelte with Ark UI, the bar of Cinderpad, a browser IDE. The wordmark leads, and the open files follow as cells on solid dividers that meet the page's top rule with a plus. Each file shows its name, a dot while it has unsaved edits and its own Close button. Closing the current file opens its neighbour (the next one, else the one before), and focus moves there; closing the last one leaves "No files open" and moves focus to Reopen, which brings the latest closed file back into its old slot. A branch chip counts the changed files, and Run, the Shine Button, saves them, says what it ran and that nothing really ran. The strip scrolls sideways with soft edges and keeps the current file in view. The block stays 56 pixels high. It's built from Button, Shine Button and Guides, with your theme's tokens for every colour. For editors, notebooks and any tool whose header is the open documents.
FAQ
How do I change the files?
Edit FILES at the top: an id, a name and whether it starts with unsaved edits. The first entry is current when the page loads. Closed files go on a stack with the slot they sat in, so Reopen puts the last one back exactly where it was. Reopening is local state; nothing is written anywhere.
What does closing a file with unsaved edits do?
It throws the edits away and says so in the polite line ("Closed router.ts. Unsaved edits discarded. Showing schema.sql."). A reopened file comes back clean. A real editor would ask first; add a confirm dialog in close if yours should.
What does Run do?
It saves every changed file, so the dots disappear and the branch chip's count drops to zero, then the button reads "Ran" for a moment. The polite line says which file ran and that this demo runs nothing. Replace run with your own handler. With no file open, Run is inert but stays in the tab order.
How does it work with a keyboard?
The file strip is a list of buttons with one tab stop: the current file. The arrow keys, Home and End move between files (reversed in a right-to-left page), Enter or Space opens one, and Delete or Backspace closes the focused file. The Close buttons are out of the tab order on purpose, since Delete does the same; click them with a pointer. Run and Reopen follow in the tab order.
How does it fit on a phone?
The wordmark shrinks to its icon, Run to its icon, and the branch chip hides below md. The file strip takes the rest of the row and scrolls, with a soft edge on the side that has more, and the current file is scrolled into view. Nothing wraps, and the bar is 56 pixels at every width.
What moves, and what happens with reduced motion?
Nothing moves on load. The strip scrolls smoothly to a chosen file, or jumps there under reduced motion, and a band of light sweeps across Run once on hover and focus (it fades in place under reduced motion). Opening and closing files change the strip with no transition.