Separator

<div class="text-foreground">
  <div class="space-y-1">
    <h4 class="text-sm font-medium leading-none">KTUI</h4>
    <p class="text-sm text-muted-foreground">A free KTUI component library.</p>
  </div>
  <div class="kt-separator my-2.5"></div>
  <div class="flex h-5 items-center space-x-4 text-sm">
    <a
      href="https://ktui.io"
      class="hover:text-primary hover:underline hover:underline-offset-2"
      >Components</a
    >
    <div class="kt-separator kt-separator-vertical"></div>
    <a
      href="https://ktui.io/docs"
      class="hover:text-primary hover:underline hover:underline-offset-2"
      >Docs</a
    >
    <div class="kt-separator kt-separator-vertical"></div>
    <a
      href="https://github.com/keenthemes/ktui"
      class="hover:text-primary hover:underline hover:underline-offset-2"
      >Source</a
    >
  </div>
</div>

<div class="max-w-xl text-foreground">
  <div class="mb-2 text-sm font-medium">Project Actions</div>
  <div class="mb-3 text-xs text-muted-foreground">
    Toolbar grouping with vertical separators.
  </div>
  <div
    class="inline-flex h-10 items-center rounded-lg border border-border bg-muted/30 px-2.5"
  >
    <button
      class="rounded-md px-2.5 py-1.5 text-sm hover:bg-accent hover:text-primary"
    >
      Edit
    </button>
    <div
      class="mx-2 h-5 kt-separator kt-separator-vertical"
      aria-hidden="true"
    ></div>
    <button
      class="rounded-md px-2.5 py-1.5 text-sm hover:bg-accent hover:text-primary"
    >
      Share
    </button>
    <div
      class="mx-2 h-5 kt-separator kt-separator-vertical"
      aria-hidden="true"
    ></div>
    <button
      class="rounded-md px-2.5 py-1.5 text-sm hover:bg-accent hover:text-primary"
    >
      Export
    </button>
    <div
      class="mx-2 h-5 kt-separator kt-separator-vertical"
      aria-hidden="true"
    ></div>
    <button
      class="rounded-md px-2.5 py-1.5 text-sm hover:bg-accent hover:text-primary"
    >
      Archive
    </button>
  </div>
</div>

<div class="max-w-sm text-foreground">
  <div class="rounded-lg border border-border bg-card p-5">
    <div class="mb-4">
      <h4 class="text-sm font-semibold">Sign In</h4>
      <p class="text-xs text-muted-foreground">
        Use your account credentials or continue with a provider.
      </p>
    </div>
    <button class="kt-btn kt-btn-outline w-full">Continue with Email</button>
    <div class="my-4 flex items-center gap-3">
      <div class="flex-1 min-w-0">
        <div class="kt-separator" aria-hidden="true"></div>
      </div>
      <span
        class="shrink-0 rounded-full border border-border px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground"
        >OR</span
      >
      <div class="flex-1 min-w-0">
        <div class="kt-separator" aria-hidden="true"></div>
      </div>
    </div>
    <button class="kt-btn kt-btn-outline w-full">Continue with Google</button>
  </div>
</div>

<div class="max-w-xl text-foreground">
  <div class="rounded-lg border border-border bg-card">
    <div class="flex items-center gap-3 px-4 py-3">
      <span class="shrink-0 text-sm font-semibold">Billing Details</span>
      <div class="flex-1 min-w-0">
        <div class="kt-separator" aria-hidden="true"></div>
      </div>
      <span class="shrink-0 text-xs text-muted-foreground">Optional</span>
    </div>
    <div class="kt-separator" aria-hidden="true"></div>
    <div class="flex items-center justify-between px-4 py-3">
      <div>
        <div class="text-sm font-medium">Company Name</div>
        <div class="text-xs text-muted-foreground">Used for invoices</div>
      </div>
      <div class="text-sm text-muted-foreground">Acme Inc.</div>
    </div>
    <div class="kt-separator" aria-hidden="true"></div>
    <div class="flex items-center justify-between px-4 py-3">
      <div>
        <div class="text-sm font-medium">Tax Number</div>
        <div class="text-xs text-muted-foreground">VAT registration</div>
      </div>
      <div class="text-sm text-muted-foreground">DE-4582931</div>
    </div>
  </div>
</div>

<div
  class="max-w-lg rounded-lg border border-border bg-background text-foreground"
>
  <div class="px-4 py-3">
    <h4 class="text-sm font-medium">Account Settings</h4>
    <p class="text-sm text-muted-foreground">
      Manage profile and security preferences.
    </p>
  </div>
  <div class="mx-4 kt-separator" aria-hidden="true"></div>
  <div class="px-4 py-3 text-sm">Profile</div>
  <div class="mx-4 kt-separator" aria-hidden="true"></div>
  <div class="px-4 py-3 text-sm">Security</div>
  <div class="mx-4 kt-separator" aria-hidden="true"></div>
  <div class="px-4 py-3 text-sm">Notifications</div>
</div>

<div class="max-w-xl rounded-lg border border-border text-foreground">
  <div class="px-4 py-3">
    <h4 class="text-sm font-medium">Recent Activity</h4>
  </div>
  <div class="kt-separator" aria-hidden="true"></div>
  <div class="px-4 py-3">
    <div class="text-sm font-medium">Signed in from new device</div>
    <div class="text-xs text-muted-foreground">2 minutes ago</div>
  </div>
  <div class="kt-separator" aria-hidden="true"></div>
  <div class="px-4 py-3">
    <div class="text-sm font-medium">Updated billing details</div>
    <div class="text-xs text-muted-foreground">1 hour ago</div>
  </div>
  <div class="kt-separator" aria-hidden="true"></div>
  <div class="px-4 py-3">
    <div class="text-sm font-medium">Exported reports</div>
    <div class="text-xs text-muted-foreground">Yesterday</div>
  </div>
</div>

<div
  class="max-w-md rounded-lg border border-border bg-card text-card-foreground"
>
  <div class="px-4 py-3">
    <h4 class="text-sm font-semibold">Storage Usage</h4>
    <p class="text-sm text-muted-foreground">72% of 100 GB used</p>
  </div>
  <div class="kt-separator" aria-hidden="true"></div>
  <div class="grid grid-cols-2 px-4 py-3">
    <div>
      <div class="text-xs text-muted-foreground">Documents</div>
      <div class="text-sm font-medium">34 GB</div>
    </div>
    <div>
      <div class="text-xs text-muted-foreground">Media</div>
      <div class="text-sm font-medium">38 GB</div>
    </div>
  </div>
</div>

<div class="max-w-xl text-foreground">
  <div class="space-y-1">
    <h4 class="text-base font-semibold">Profile Overview</h4>
    <p class="text-sm text-muted-foreground">
      Basic account details and communication preferences.
    </p>
  </div>
  <div class="my-4 kt-separator" aria-hidden="true"></div>
  <div class="space-y-1">
    <h5 class="text-sm font-medium">Security Settings</h5>
    <p class="text-sm text-muted-foreground">
      Password, sessions, and multi-factor authentication options.
    </p>
  </div>
</div>