Getting started

@drobinetm/multitabs gives your SPA a browser-style tab layer with router-aware navigation, persistence, drag and drop, close actions, and reload hooks.

Choose a package

Pick the package that matches your stack.

Install with your package manager

Install one of the packages with pnpm, npm, or yarn.

pnpm add @drobinetm/multitabs-vue
npm install @drobinetm/multitabs-vue
yarn add @drobinetm/multitabs-vue

Replace the package name with the React or Angular variant when needed.

What the library provides

The API shape stays conceptually aligned across the supported stacks.

• A visual MultiTabs component.
• A state layer tied to the router used by each stack.
• A tab reload primitive so tab content can remount or refetch.
• CSS custom properties for theming.

If your app renders multiple previews, tenants, or embedded shells in the same browser runtime, namespace persisted state per surface. The Vue package exposes createScopedStorageKey() and resetMultiTabsRuntime() for that isolation workflow.

Theme the component

The packages use CSS custom properties instead of a hard dependency on a UI library. Override the tokens in your app CSS.

:root {
  --drm-tabs-active-bg: #184e6c;
  --drm-tabs-active-color: #ffffff;
  --drm-tabs-border-radius: 14px;
  --drm-tabs-tab-max-width: 16rem;
}

Recommended use case

This component works best in long-lived application shells such as claims systems, back-office dashboards, CRMs, and internal admin tools where users switch between multiple live records.

Next steps

• Read the Vue guide.
• Read the React guide.
• Read the Angular guide.