Skip to content
Docs Prototypes Whitepaper

Tabs

Shadcn tabs reconstructed on Proto UI.

<wc-shadcn-tabs-root default-value="account">
  <wc-shadcn-tabs-list>
    <wc-shadcn-tabs-trigger value="account">Account</wc-shadcn-tabs-trigger>
    <wc-shadcn-tabs-trigger value="password">Password</wc-shadcn-tabs-trigger>
    <wc-shadcn-tabs-trigger value="billing" disabled>Billing</wc-shadcn-tabs-trigger>
  </wc-shadcn-tabs-list>
  <wc-shadcn-tabs-content value="account">Make changes to your account here.</wc-shadcn-tabs-content>
  <wc-shadcn-tabs-content value="password">Change your password here.</wc-shadcn-tabs-content>
  <wc-shadcn-tabs-content value="billing">Billing tab is disabled in this preview.</wc-shadcn-tabs-content>
</wc-shadcn-tabs-root>
import {
  ShadcnTabsContent,
  ShadcnTabsList,
  ShadcnTabsRoot,
  ShadcnTabsTrigger,
} from '@prototype-libs/shadcn';

export function DemoShadcnTabsDemo() {
  return (
    <ShadcnTabsRoot defaultValue="account">
      <ShadcnTabsList>
        <ShadcnTabsTrigger value="account">Account</ShadcnTabsTrigger>
        <ShadcnTabsTrigger value="password">Password</ShadcnTabsTrigger>
        <ShadcnTabsTrigger value="billing" disabled>
          Billing
        </ShadcnTabsTrigger>
      </ShadcnTabsList>
      <ShadcnTabsContent value="account">Make changes to your account here.</ShadcnTabsContent>
      <ShadcnTabsContent value="password">Change your password here.</ShadcnTabsContent>
      <ShadcnTabsContent value="billing">
        Billing tab is disabled in this preview.
      </ShadcnTabsContent>
    </ShadcnTabsRoot>
  );
}
<script setup lang="ts">
import {
  ShadcnTabsContent,
  ShadcnTabsList,
  ShadcnTabsRoot,
  ShadcnTabsTrigger,
} from '@prototype-libs/shadcn';
</script>

<template>
  <ShadcnTabsRoot defaultValue="account">
    <ShadcnTabsList>
      <ShadcnTabsTrigger value="account">Account</ShadcnTabsTrigger>
      <ShadcnTabsTrigger value="password">Password</ShadcnTabsTrigger>
      <ShadcnTabsTrigger value="billing" disabled>Billing</ShadcnTabsTrigger>
    </ShadcnTabsList>
    <ShadcnTabsContent value="account">Make changes to your account here.</ShadcnTabsContent>
    <ShadcnTabsContent value="password">Change your password here.</ShadcnTabsContent>
    <ShadcnTabsContent value="billing">Billing tab is disabled in this preview.</ShadcnTabsContent>
  </ShadcnTabsRoot>
</template>

Content mount policy

Section titled “Content mount policy”

TabsContent uses a lazy L1 view by default:

  • only the current panel materializes a host view;
  • an inactive panel detaches its view while preserving its Proto instance, state, and exposes;
  • keepMounted={true} is the only view-retention option and keeps the complete inactive view mounted.

Web Component keeps the custom element as the owner and hides that owner while its internal view is detached. Reactivating the panel materializes a new view inside the same Proto instance owner.