Editor Tab

1
2
3import type { ReactNode } from 'react';

import {

Installation#

pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/editor-tab.json

Usage#

import { EditorTab, EditorTabTitle, EditorTabCloseButton } from '@/components/navigation/editor-tab';

<EditorTab active dirty>
  <ItemContent>
    <EditorTabTitle>page.tsx</EditorTabTitle>
  </ItemContent>
  <ItemActions>
    <EditorTabCloseButton aria-label="Close page.tsx" onClick={close} />
  </ItemActions>
</EditorTab>

The consumer composes the parts inside upstream ItemContent and ItemActions. Use it for one tab in an editor's tab strip; give it active for the document on show and dirty while that document has unsaved changes.

Composition#

EditorTab
|-- ItemContent
|   `-- EditorTabTitle
`-- ItemActions
    `-- EditorTabCloseButton

API reference#

EditorTab#

Renders shadcn's Item and takes every prop it takes except variant and size, which it fixes to outline and xs, plus:

It sets data-slot="editor-tab", data-active while active, and data-dirty while dirty.

EditorTabTitle#

Renders shadcn's ItemTitle and takes every prop it takes. It is muted until its tab is active. It sets data-slot="editor-tab-title".

EditorTabCloseButton#

Renders shadcn's Button and takes every prop it takes except children, which it supplies as the Unsaved Indicator and a close icon.

It is named "Close" unless given its own aria-label. On a dirty tab it shows the unsaved dot; the close icon takes its place while the tab is hovered or active, or while the button has keyboard focus. The icon plays its animation only while the button itself is hovered or focused, not merely while the tab is active. A click on it does not reach the tab, so closing a tab does not also activate it. It sets data-slot="editor-tab-close-button".