File tabs for editors: the active tab sits on the surface, and unsaved files carry a warning dot.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/editor-tabsPlayground
export const metadata = { title: "Ship it" };export default function Page() {return <h1 className="text-4xl">Ship it</h1>;}
Unsaved file open
export default function Layout({ children }) {return <main>{children}</main>;}
Icons animation
Close marks
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/editor-tabs
Accessibility
- Uses tablist, tab and tabpanel.
- The unsaved dot has a text equivalent.
- Each close mark names its file.
Motion
- The panel fades and rises 8 px over 400 ms on first render.
- Lines fade in over 240 ms, 40 ms apart.
- The active plate slides between tabs.
- With reduced motion, everything appears in place.
Responsive behavior
- 640 wide on Web and 358 on Mobile.
- Mobile keeps two tabs and folds the rest into a count.
Performance
- Each code line is its own motion span with a 40 ms stagger, capped at line 20 so long files land in under a second. Nothing is virtualized, so keep samples short.
- The active plate is one shared layout element.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import EditorTabs from @/components/fetaui/editor-tabs after installing it. files is required, with name and code.
- File names act as ids, so keep them unique. modified adds the warning dot.
- onClose shows the close marks and only reports the name, so remove the file yourself.
- Code renders as plain text with no highlighting. Mobile keeps two tabs and folds the rest into a menu, and the open file always keeps a tab. Composes DropdownMenu.
Related
TabsComponentSwitch between views of the same thing. Panels swipe with the finger and the indicator follows.Code BlockComponentCode on the Soft tray: file name and Copy above, numbered lines in an inset card, with highlights and diffs.File TreeComponentA file explorer: folders with chevrons, files with type icons, git marks and a selected row.Code OutputComponentA command and its output, streaming while it runs, then a settled mark.TreeComponentHierarchies in a Soft card: files, navigation with counts, checkboxes with parent states, and indent guides.