Tabs

<bs:bsui-tabs defaultValue="overview">
  <bs:bsui-tabs-list>
    <bs:bsui-tabs-trigger value="overview" title="Overview" />
    <bs:bsui-tabs-trigger value="activity" title="Activity" />
  </bs:bsui-tabs-list>
  <bs:bsui-tabs-panel value="overview">
    <bs:bsui-text content="Everything at a glance." variant="muted" />
  </bs:bsui-tabs-panel>
  <bs:bsui-tabs-panel value="activity">
    <bs:bsui-text content="What changed recently." variant="muted" />
  </bs:bsui-tabs-panel>
</bs:bsui-tabs>

<bs:bsui-tabs defaultValue="general" orientation="vertical">
  <bs:bsui-tabs-list>
    <bs:bsui-tabs-trigger value="general" title="General" />
    <bs:bsui-tabs-trigger value="members" title="Members" />
    <bs:bsui-tabs-trigger value="billing" title="Billing" />
  </bs:bsui-tabs-list>
  <bs:bsui-tabs-panel value="general">
    <bs:bsui-text content="Workspace name, time zone, and default branch." variant="muted" />
  </bs:bsui-tabs-panel>
  <bs:bsui-tabs-panel value="members">
    <bs:bsui-text content="Invite teammates and decide what each of them can change." variant="muted" />
  </bs:bsui-tabs-panel>
  <bs:bsui-tabs-panel value="billing">
    <bs:bsui-text content="The card on file, past invoices, and the limits of your plan." variant="muted" />
  </bs:bsui-tabs-panel>
</bs:bsui-tabs>

<bs:bsui-tabs defaultValue="preview" activateOnFocus="false" loop="false">
  <bs:bsui-tabs-list>
    <bs:bsui-tabs-trigger value="preview" title="Preview" />
    <bs:bsui-tabs-trigger value="html" title="HTML" />
    <bs:bsui-tabs-trigger value="json" title="JSON" />
  </bs:bsui-tabs-list>
  <bs:bsui-tabs-panel value="preview">
    <bs:bsui-text content="The rendered block, exactly as a visitor sees it." variant="muted" />
  </bs:bsui-tabs-panel>
  <bs:bsui-tabs-panel value="html">
    <bs:bsui-text content="The markup the server returned for this block." variant="muted" />
  </bs:bsui-tabs-panel>
  <bs:bsui-tabs-panel value="json">
    <bs:bsui-text content="Every attribute the block was rendered with." variant="muted" />
  </bs:bsui-tabs-panel>
</bs:bsui-tabs>

<bs:bsui-tabs defaultValue="signin">
  <bs:bsui-tabs-list>
    <bs:bsui-tabs-trigger value="signin" title="Sign in" />
    <bs:bsui-tabs-trigger value="register" title="Create account" />
  </bs:bsui-tabs-list>
  <bs:bsui-tabs-panel value="signin">
    <bs:bsui-stack direction="column" gap="3" align="stretch">
      <bs:bsui-field>
        <bs:bsui-field-label text="Email" />
        <bs:bsui-input type="email" placeholder="you@example.com" />
      </bs:bsui-field>
      <bs:bsui-field>
        <bs:bsui-field-label text="Password" />
        <bs:bsui-password-input placeholder="Your password" />
      </bs:bsui-field>
      <bs:bsui-button label="Sign in" />
    </bs:bsui-stack>
  </bs:bsui-tabs-panel>
  <bs:bsui-tabs-panel value="register">
    <bs:bsui-stack direction="column" gap="3" align="stretch">
      <bs:bsui-field>
        <bs:bsui-field-label text="Work email" />
        <bs:bsui-input type="email" placeholder="you@example.com" />
        <bs:bsui-field-description text="We send a confirmation link before anything else." />
      </bs:bsui-field>
      <bs:bsui-button label="Create account" />
    </bs:bsui-stack>
  </bs:bsui-tabs-panel>
</bs:bsui-tabs>